I am creating jquery Datatable dynamically. ColumnNames and Rows Values are coming from Server side using Ajax call. Now, I need this datatable to be reinitialized everytime, so I used property "bDestroy": true, on every ajax call but after first display, DOM is getting broken. Here is my code
$('#JDatadt').dataTable({
"order": [],
"dom": "Bfrtip",
"buttons": ["csv", "excel", "pdf"],
"columnDefs": [{ "className": "dt-center", "orderable": false, "width": 20 }],
"bInfo": false,
"paging": true,
"processing": true,
"bDestroy": true,
"columns": dataObject[0].columns,
"data": dataObject[0].data
});
What is getting wrong here. Please help
Datatable by default try to sort column with index 0 if not specified.
if you don't want to sort by default with any column just add
"aaSorting": [[ ]] ,
you can destroy table by using fnDestroy() function of datatable. it will surely works for you.
Related
When I sort a table by the date field using the uk-date plugin the dates seem to be messed up by nulls. These nulls seem to stay in the middle of the order. Then after it then restarts the dates. The data is populated from an array. When i try modifying the code it seems to either break the date formatting or make it so nulls are always at the start. Rather than start or end based on if you sort asc/desc. It is also using date time moment plugin.
<script>var resp_53 = true; var datatablearraycols_53_a = [{"orderable": false, "bSortable": false, "className":"no-sort", "searchable": false,},null,null,null,null,null,{ type: "date-uk" },null,null,null,null,null,null,null,
];</script>
{
"columns": datatablearraycols_53_a,
"data": datatablearray_53_a,
"processing": true,
stateSave: true,
"responsive": resp_53,
"scrollX": !resp_53,
"columnDefs": [{
"targets": 'no-sort',
"orderable": false,
}],
"dom": '<fB<t>lip>',
"buttons": [
{ extend: 'csvHtml5', text: 'Export' }
]
});
Trying to work around problem with datatables pagination. The problem is:
I have some code to initialize Datatable in Laravel:
<script>
$(document).ready(function () {
$('.js-dataTable-full').DataTable({
ajax: {
"url": "{{ route('page.data') }}",
"type": "GET",
},
"autoWidth": false,
"serverSide": true,
"pageLength": 5,
"bSort": false,
"searching": true,
// "order": [[1, "desc"]],
"processing": true,
"paging": true,
"pagingType": 'full_numbers',
.......................................
Some text below
The data is loaded correctly, however there's still an issue with pagination.
As you see, the pagination links are not active and cannot be clicked, though text on the left clearly says that there are only 5 of 8 entries on the page.
In the json response total number of items is present:
No ideas by now, so any help would be appreciated.
I don't want to sort my action column, so I did :
<th class="no-sort" >Actions</th>
and update my JS like this
$('table').DataTable( {
"bLengthChange": true,
"Filter": true,
"Info": true,
"bSort": true,
"bPaginate": false,
"searchHighlight": true,
"aoColumnDefs": [{
"bSort": false,
"aTargets": ["no-sort"]
}]
} );
I still see that it is sortable. 🤦🏻♂️
How do I stop that ?
The correct property is bSortable, not bSort. See the documentation
"aoColumnDefs": [{
"bSortable": false,
"aTargets": ["no-sort"]
}]
Also note that from your use of aoColumnDefs it appears you're using a very old version of DataTables; at least 5 years old in fact. I'd suggest upgrading it when possible.
I am trying to refresh the data from my table, but I am not using ajax and that is why when I try to use table.ajax.reload() it is not working.
It gives me wrong json response since the way I am declaring my table is this:
var table = $('.table').DataTable( {
"data": global_data,
"scrollX": true,
"pagination": false,
"lengthChange": false,
"bPaginate": false,
"language": {
"url": "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
},
"order": [[ 2, "desc" ]],
});
So in another process I update the variable global_data, how to refresh the data?
Thanks
If you are using datatables you can destroy the data with the following line:
$ ('# mytable'). dataTable (). fnDestroy ();
and fill the table again with the data you want.
var table = $('.table').DataTable( {
"data": global_data,
"scrollX": true,
"pagination": false,
"lengthChange": false,
"bPaginate": false,
"language": {
"url": "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
},
"order": [[ 2, "desc" ]],
});
I am using datatables inbuilt search but for large data it is taking time to appear search text box, i want to implement search text box above the table so that it comes early than the table.
code:
$('#example').dataTable( {
"sPaginationType": "full_numbers",
"bStateSave": false,
"iDisplayLength": 100,
"deferRender": true,
"sDom": '<"H"lfr>t<"F"ip>',
aoColumnDefs: [
{
bSortable: false,
aTargets: [ -1,-2 ]
}
]
} );