In jquery data tables excel,copy and pdf buttons not showing other than this every thing works fine what could be the issue.
$(document).ready(function() {
var table = $('.export-table').DataTable({
dom: 'Bfrtip',
'bServerSide': true,
'sAjaxSource': 'api',
buttons: ['copy', 'excel', 'pdf']
});
table.buttons().container().appendTo('#export-table_wrapper .col-sm-6:eq(0)');
});
Any help would be appreciated.
Related
I'm messing around with laravel and datatables and everything has been fine... until now. I hope some of you might be able to help me :)
I got a Select dropdown menu, that search one of the columns in the datatable (on change). The filtering works fine, except the default value on pageload.
The datatable does not filter on pageload. The default value from the Select menu does not work and I cant find a solution for this and it's starting to drive me crazy.
My dropdown/select:
<select class="ml-2" id="filter_effect">
#foreach($effects as $effect)
<option value="{{ $effect->title }}"
#if($effect->id == $configurator->motor->effect_id)
selected
#endif
>{{ $effect->title }} kW</option>
#endforeach
</select>
Datatables code:
$(document).ready(function() {
var table = $('#changeMotorForm').DataTable({
columnDefs: [
{ orderable: false, targets: -1 }
]}
});
$('#filter_effect').on('change', function () {
table.columns(1).search( this.value ).draw();
});
});
Just to make it clear. The filtering of the datatable works fine, out of the box. Same with the select input filtering - works great. It's the default value that is causing problems. It does not filter/search the datatable on pageload, only when I select another <option>.
UPDATE: Working code:
<script>
$(document).ready(function() {
var table = $('#changeMotorForm').DataTable({
columnDefs: [
{ orderable: false, targets: -1 }
]
});
table.columns(1).search( $('#filter_effect').val() ).draw();
$('#filter_effect').on('change', function () {
table.columns(1).search( this.value ).draw();
} );
});
</script>
you can apply filter soon after the DataTable initialization
var table = $('#changeMotorForm').DataTable({
columnDefs: [
{ orderable: false, targets: -1 }
]}
});
table.columns(1).search( $('#filter_effect').val() ).draw();
OR make first option value none instead of real values.
so user can select to apply filter
Use initComplete.
var table = $('#changeMotorForm').DataTable({
columnDefs: [
{ orderable: false, targets: -1 }
],
initComplete: function() {
this.columns(1).search($('#filter_effect').val()).draw();
}
});
I have a code below and I have tried it already and its working.
What I am trying to achieve is to load data using ajax to my data tables.
The code below is working but now I would to refresh every 5 to 10 second checking if there is new data in the database.
$(document).ready(function () {
$("#get_categories").DataTable({
"ajax": { //create an ajax request to display.php
"url": "process/get_categories.php",
"dataSrc": ""
},
"columns": [
{"data": "id"},
{"data": "name"},
{"data": "action"}
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
});
As you've already defined an AJAX source for your DataTable you can simply call reload() in an interval:
var table = $("#get_categories").DataTable({
// settings...
});
setInterval(function () {
table.ajax.reload();
}, 10000);
However, as #ADyson mentions in the comments, refreshing a data source this often can lead to server load problems, depending on how may concurrent users you have accessing the data. I'd suggest looking in to using WebSockets or Server Sent Events as a more scalable alternative.
i have a table with data getting from database and am using datatable for that data now i need a select box for every row like i have three rows in a table
firstname||number||email
sairam||123||gau#gmail.com
gau||1234||gauuiu#gmail.com
now when i click on first name there is should be a select box and i need to get sairam and gau in that select box soo when i select sairam need to get entire coloumn.and am using below code for jquery datatables.
$(document).ready(function() {
$('#myTable').dataTable({
dom: 'Bfrtip',
buttons: [
'excelHtml5',
'pdfHtml5'
]
});
});
Looking at your question, i assume that on editing first cell for any row in your datatable, you want a select box to appear and select box should have certain values.
here is the code that should help you
$('#myTable').dataTable({
dom: 'Bfrtip',
buttons: [
'excelHtml5',
'pdfHtml5'
]
}).makeEditable({
sUpdateURL: "",//url to handle the update call when lets say a name is selected for name select box
sUpdateHttpMethod: "POST",
"aoColumns": [
{
//settings for name column
indicator: 'Saving selected name',
tooltip: 'Click to select name',
loadtext: 'loading...',
type: 'select',
onblur: 'cancel',
submit: 'Ok',
loadurl: '',//url to load select box items
loadtype: 'POST',
width: '25%',
cssclass: "required"
},
{
//settings for number column
},
{
//settings for email column
}
]
});
});
the code above uses the jquery jeditable plugin for inplace editing
https://plugins.jquery.com/jeditable/
Hope it helps!!
We have more than 200 000 records. Datatables take too much time to load.
here is code we have using
$(document).ready(function() {
var dataTable = $('#dataTables-example').DataTable( {
responsive: true,
"processing": true,
"serverSide": true,
'iDisplayLength': 25,
"aaSorting": [[ 7, "desc" ]],
"ajax": $.fn.dataTable.pipeline( {
url: 'report_list_ajax.php'
}),
"columnDefs": [
{"targets": 0, "orderable": false },
{"targets": 4, "orderable": false },
]
});
});
so we dont need jquery datatables load or initialize while page loading.
and jquery datatables initialize and execute when submitted the external form only.
i.e: "FROM" and "TO Date" selection and click on submit button, the datatables will load based on form inputs..
Datatables initialize and execute when external form submit:
$("#external_form_id").on("submit", function(){
//datatable initiate code...
});
Based on code above, datatable will not initiate until the external form trigger submit. This is what u want?
I need some help with jQuery UI autocomplete function.
I have one cell which has class, and I have a working autocomplete in it right now.
$("[class*='enari']").autocomplete({
source: "getproductnow.php",
autoFocus: true,
minLength: 2,
dataType: "json",
select: function(event, ui) {
$('#tuote').val(ui.item.value);
},
open: function(event, ui){
$("ul.ui-autocomplete li a").each(function(){
var htmlString = $(this).html().replace(/</g, '<');
htmlString = htmlString.replace(/>/g, '>');
$(this).html(htmlString);
});
}
});
Where the problem comes is the situation where script adds by "document.createElement('div');" a new input field which has same name and autocomplete is not anymore working.
I need to have autocomplete working with "running numbers (1,2,3,4,5,6 and so on...)". Is it even possible and how?
Sorry for my rough language and thank you for your answers!