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.
Related
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 trying to make cart list of my web. It's working fine in the hosted website but when i download it at home and make it as localhost it give me error.
here is the code line
<script type="text/javascript">
$(document).ready(function() {
$('#widget_tb_purchase').dataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": false,
"info": false,
"autoWidth": false,
"sDom": 'lfrtip',
"scrollCollapse": true,
lengthMenu: [
[ 5 ]
]
});
});
</script>
the spesific line that it said contain error
lengthMenu: [
[ 5 ]
] <<< [this line]
and my computer at work office using window 7 32-bit, at home i'm using window 10 64-bit.
I have recently found serverside datatables and have implemented it to my page. However when I enabled scrollx, my table width was shrunk to 3/4 of its full size. Also, duplicate empty headers would appear under my current headers and I am unsure of what I can do to remove them. I hope someone can take a look at my configuration and see if something can be improved.
Thank you so much.
<script type="text/javascript">
var table;
$(document).ready(function() {
//datatables
table = $('#table').DataTable({
"scrollX": true,
"processing": true, //Feature control the processing indicator.
"language": {
"processing": '<div class="loading"><div class="content">\n\
<img src="<?php echo base_url().'assets/images/loading/loading.gif'; ?>"/>\n\
</div></div>'
},
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [], //Initial no order.
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo site_url('CTRL/ajax')?>",
"type": "POST",
"data": function(d){
d.agent_code = "agent1";
}
},
//Set column definition initialisation properties.
"columnDefs": [
{
"targets": [ 0 ], //first column / numbering column
"orderable": false, //set not orderable
},
]
});
});
</script>
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.
I am using Datatables (http://www.datatables.net) at one of my projects. The datatable opens in a Bootstrap Modal and I set the option that only 5 rows are visible on one page. That is working as it should.
Now I wanted to hide the dropdown box for display records and therefore I found the solution on this thread: StackoverFlow - Solution for hiding "Display Records"
My code looks like this now:
$(document).ready(function() {
$('#readnews').dataTable({
"iDisplayLength": 5,
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false });
My Problem is now that this code is not working! If I use this code:
$(document).ready(function() {
$('#readnews').dataTable({
"iDisplayLength": 5 });
I can only see 5 rows at a page that is good. If I use this code:
$(document).ready(function() {
$('#readnews').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false });
});
I can see that the "Display Records" is hidden but I am not able to use both options (hide "Display Records" and only show 5 recors per page) at once.
Can someone tell me what I am doing wrong? What should my code look like? I do not know what I am doing wrong.
Thanks in advance,
Chris
I Means
$(document).ready(function () {
$('#readnews').DataTable({
"fnDrawCallback": function (oSettings) {
if ($('#readnews tr').length < 5) {
$('.dataTables_paginate').hide();
}
},
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
"iDisplayLength": 5,
});
});