DataTable cannot click the button after pagination - javascript

I have done a datatable and custom it's data but when i click the button on the first column, it only works on the first page and cannot click on other forward pages.
$('#tbl').DataTable( {
responsive: true,
data: data1,
autoWidth: false,
"order": [[ 7, "asc" ]],
"iDisplayLength": 5,
"pagingType": "full_numbers",
"dom": '<"top">rt<"bottom"p><"clear">',
"oLanguage": {
"sEmptyTable": "Not Record"
},
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] }
],
"columns": [
{},{"sClass": "dt-body-justify"},{},{},{},{},{},{},{},{}
]
} );
BUT when for the click function in live mode, it still cannot work
$('#tbl tbody tr #edit_current_product').delegate('a', 'click', function () {
.......
} );

id's must be unique. We dont know your markup but
$('#tbl tbody tr #edit_current_product').delegate('a', 'click', function ()
seems utterly wrong. Either you have multiple <a>'s with the same id #edit_current_product or the right thing actually happens, you have paginated away from the page where #edit_current_product is present.
I guess that what you really want is
$('#tbl').on('click', 'tbody tr a', function()
or use a class instead of an id
$('#tbl').on('click', 'tbody tr .edit_current_product', function()
BTW, why
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] }
],
"columns": [
{},{"sClass": "dt-body-justify"},{},{},{},{},{},{},{},{}
]
you just need
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] },
{ "sClass": "dt-body-justify", targets : [1] }
]

Related

jQuery datatable retain row highlight after reload

I am reloading my datatable on 10 second intervals. When a user clicks on a row, that row will highlight. But when the datatable reloads, the highlight is gone.
Here is the shortened code for my datable:
$(document).ready(function()
{
// set datatable
$('#example1').DataTable({
"ajax": {
"url": "api/process.php",
"type": "POST",
"dataSrc": ''
},
"columns": [
{ "data": "" },
{ "data": "column1" },
{ "data": "column2" },
{ "data": "column3" }
],
"iDisplayLength": 25,
"order": [[ 6, "desc" ]],
"scrollY": 600,
"scrollX": true,
"bDestroy": true,
"stateSave": true
});
// reload datatable every 30 seconds
setInterval(function()
{
var table = $('#example1').DataTable();
table.ajax.reload();
}, 30000);
// highlight row
$('#example1 tbody').on('click', 'tr', function()
{
$('#example1 tbody > tr').removeClass('selected');
$(this).addClass('selected');
});
});
All of the above works exactly how it's supposed to work. I just need to retain the row highlight after the datatable reloads.
Also, I attempted the answer from this post, but I scrapped it as the row no longer highlights.
Kindly update js file with below changes. Below code will save row clicked in global parameter and then focus the clicked row after ajax call.
var gblIndex = 0; //this will save row clicked index
function setFocus(){
$($('#example1 tbody > tr')[gblIndex]).addClass('selected');
}
$(document).ready(function()
{
// set datatable
$('#example1').DataTable({
"ajax": {
"url": "api/process.php",
"type": "POST",
"dataSrc": ''
},
"columns": [
{ "data": "" },
{ "data": "column1" },
{ "data": "column2" },
{ "data": "column3" }
],
"iDisplayLength": 25,
"order": [[ 6, "desc" ]],
"scrollY": 600,
"scrollX": true,
"bDestroy": true,
"stateSave": true
});
// reload datatable every 30 seconds
setInterval(function()
{
var table = $('#example1').DataTable();
table.ajax.reload();
setFocus(); // this will set focus/highlight row
}, 30000);
// highlight row
$('#example1 tbody').on('click', 'tr', function()
{
$('#example1 tbody > tr').removeClass('selected');
$(this).addClass('selected');
gblIndex = $(this).index(); // this will save the index clicked
});
});
You should review their actual selection documentation to manipulate this. This feature is already built in and setup so on ajax.reload() it will keep your selections.
You can apply classes/styling with their methods as well.
https://datatables.net/reference/option/#select

Disabling sorting in datatables

Here is the code i am using
$(document).ready( function() {
$('.d-table').dataTable( {
"responsive": true,
"columnDefs": [ { "targets": 0,"searchable": false, 'bSortable': false } ]
});
})
This code is disabled first column sorting but I want to disable Sorting completely while i sort other columns.
For disabling the particular column sorting you can specify column index for disabling as below
For first column :
"columnDefs": [ {
"targets": 0,
"orderable": false
} ]
If you want to disable the sorting completely in DataTable. There is property called "bSort" you can set it to "false" it will remove the sorting from whole table.
like below
$('.d-table').dataTable( {
"bSort": false
});
Demo : https://jsfiddle.net/Prakash_Thete/k1pm5ne0/

jQuery Datatables - Show Last Page First

I am using the jQuery DataTables plugin (https://datatables.net/). I am trying to get the last page to be the first page. I am sorting by date and would like the latest entries to be at the bottom of the visible area.
So if the "Records per page:" is 10, then the latest date should be at the bottom. I am using the plugin to create a "logbook" so the latest entries should always be at the bottom. I have tried the following but I can't get it to work:
jQuery
// On page load: datatable
var table_companies = $('#table_companies').dataTable({
"ajax": "data.php?job=get_companies",
"sDom": '<"top"lB><"clear">rt<"bottom"p><"clear">',
"language": {
"paginate": {
"previous": "Older Entries"
}
},
"autoWidth": false,
"searching": true,
"columns": [
{ "data": "date" },
{ "data": "type", "sClass": "company_name" },
{ "data": "registration" }
],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [-1] }
],
"lengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
"pagingType": "simple",
"oLanguage": {
"sLengthMenu": "Records per page: _MENU_",
"sInfo": "Total of _TOTAL_ records (showing _START_ to _END_)",
"sInfoFiltered": "(filtered from _MAX_ total records)"
}
});
table_companies.fnPageChange( 'last' );
I am using this link to load my plugin:
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/dt-1.10.11,b-1.1.2,b-colvis-1.1.2,b-print-1.1.2,cr-1.3.1,r-2.0.2/datatables.min.js"></script>
Please check this code:
$('#datatable').DataTable().page('last').draw('page');
It turns out it was as simple as capitalizing the "D" in dataTables.
Changed:
var table_companies = $('#table_companies').dataTable({
to:
var table_companies = $('#table_companies').DataTable({

DataTables ajax.reload when keeping pagination it jumps to the bottom of the page

I'm using jQuery DataTables with ajax sourced data.
I have to keep the data up to date every 30 seconds without refreshing the page, and ajax.reload() is the function that I need.
I put ajax.reload() inside a setInterval function.
And all works right (if you stay on page 1). But when you surf the table on page 2 or 3, when setInterval is fired, it gets you back to the page 1.
So ...
Looking to docs at this url: http://datatables.net/reference/api/ajax.reload()
if I pass "false" as second parameter it holds the current paging position, and paging is not reset on reload. BINGO!
It works! BUT ... I have a new problem that a tried to solve the all day and now I'm stuck. That's why I post this question.
It keeps paging but if you are not on page 1, every time that ajax.reload() is fired, the page scrolls (jump directly) to the bottom.
It's very unfriendly, unreadable, unusable.
I don't know WHY the page scrolls to the end-bottom.
I post a link to my simple datatable js that I use on my page.
jsfiddle
var url = table.data('url');
var filterType = table.data('filtertype');
var options = {
"ajax": {
"url": url,
"type": "GET",
"data": function (d) {
d.contact_type = filterType
// this variable will set by server when page load. It should be "lead", "prospect", "client". Leave empty to get all.
}
},
"columns": [
{"data": "html_is_company"},
{"data": "name"},
{"data": "html_type_label"},
{"data": "created"},
{"data": "last_update"},
{"data": "html_actions"},
{"data": "tsu"},
{"data": "business_name"}
],
"bLengthChange": false,
"pageLength": 20,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"columnDefs": [
{
"targets": [ 7 ],
"visible": false,
"searchable": true,
},
{
"targets": [ 6, 7 ],
"searchable": false,
"visible": false
},
{
"targets": [0, 5],
"searchable": false,
"orderable": false
},
{
"targets": [ 4 ],
"render": function (data, type, row) {
return moment(data, IN_DATE_TIME_FORMAT, 'it').fromNow();//.format(DATE_TIME_FORMAT);////;
}
},
{
// Sort column 4 (formatted date) by column 6 (hidden seconds)
"orderData":[ 6 ],
"targets": [ 4 ]
}],
"order": [[4, "desc"]],
"search": "_INPUT_",
"language": {
"sSearchPlaceholder": "Cerca...",
"paginate": {
"previous": '<i class="icon wb-chevron-left-mini"></i>',
"next": '<i class="icon wb-chevron-right-mini"></i>'
},
//"url": "//cdn.datatables.net/plug-ins/1.10.9/i18n/Italian.json"
}
};
var datatable = table.DataTable(options);
this.setDataTable(datatable);
setInterval(function(){
datatable.ajax.reload(null, false);
}, 5000);
My solution:
"fnDrawCallback": function(data) {
$(".paginate_button > a").on("focus", function() {
$(this).blur();
});
}
jacopo.galli's solution was very clunky when I implemented for my table, but it's probably because my code was a mess. The idea of adding blur() is great thou.
I rewrite his code a bit:
$(window).scroll(function(){
$(".paginate_button > a").blur();
});
The buttons on the pagination bar will be "unfocused" once the page scrolls.
So your final code should look like this:
var url = table.data('url');
var filterType = table.data('filtertype');
var options = {
"ajax": {
"url": url,
"type": "GET",
"data": function (d) {
d.contact_type = filterType
// this variable will set by server when page load. It should be "lead", "prospect", "client". Leave empty to get all.
}
},
"columns": [
{"data": "html_is_company"},
{"data": "name"},
{"data": "html_type_label"},
{"data": "created"},
{"data": "last_update"},
{"data": "html_actions"},
{"data": "tsu"},
{"data": "business_name"}
],
"bLengthChange": false,
"pageLength": 20,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"columnDefs": [
{
"targets": [ 7 ],
"visible": false,
"searchable": true,
},
{
"targets": [ 6, 7 ],
"searchable": false,
"visible": false
},
{
"targets": [0, 5],
"searchable": false,
"orderable": false
},
{
"targets": [ 4 ],
"render": function (data, type, row) {
return moment(data, IN_DATE_TIME_FORMAT, 'it').fromNow();//.format(DATE_TIME_FORMAT);////;
}
},
{
// Sort column 4 (formatted date) by column 6 (hidden seconds)
"orderData":[ 6 ],
"targets": [ 4 ]
}],
"order": [[4, "desc"]],
"search": "_INPUT_",
"language": {
"sSearchPlaceholder": "Cerca...",
"paginate": {
"previous": '<i class="icon wb-chevron-left-mini"></i>',
"next": '<i class="icon wb-chevron-right-mini"></i>'
},
//"url": "//cdn.datatables.net/plug-ins/1.10.9/i18n/Italian.json"
}
};
var datatable = table.DataTable(options);
this.setDataTable(datatable);
$(window).scroll(function(){
$(".paginate_button > a").blur();
});
setInterval(function(){
datatable.ajax.reload(null, false);
}, 5000);
I've found a solution that works for me.
The problem was the "focus" on DataTables pagination links.
When user clicks on a link page, it sets a focus on that link and when ajax.reload() is fired the browser gets you where the focused element is. My table is the last element of the page so the page scrolls to the bottom.
I got it when I clicked on another area of the page after clicked on page 2 link. The "jumping" problem was gone.
So, I solved firing a blur() when DataTables has complete its initialization and when ajax.reload() has finished (thanks to the first parameter that allows you to define a function).
In DataTables options I added this:
"initComplete": function(settings, json) {
$(".paginate_button > a").on("focus", function(){
$(this).blur();
});
},
and then, in setInterval:
setInterval(function(){
datatable.ajax.reload(function(){
$(".paginate_button > a").on("focus", function(){
$(this).blur();
});
}, false);
}, 30000);
Don't know if this is the "best solution" ... but it works and could helps someone.

jQuery datatable - fnReloadAjax does not override sAjaxSource

I have the following code which shows all rows by default and when clicking the .view-unread-rows button the datatable should only show unread rows. However, it does not appear to be running the reload query.
$(".view-unread-rows").click( function(e) {
e.preventDefault();
message_table.fnReloadAjax("/letters/ajax/T");
message_table.fnDraw();
});
$(".view-all-rows").click( function(e) {
e.preventDefault();
message_table.fnReloadAjax("/letters/ajax/F");
message_table.fnDraw();
});
message_table = $('.message_table').dataTable({
"sPaginationType": "bootstrap",
"iDisplayLength": 10,
"iDisplayStart": 0,
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "POST",
"sAjaxSource": "/letters/ajax/F",
"sDom": '<"top">rt<"bottom"><"clear">',
"aaSorting": [[3, 'desc']],
"aoColumns": [
{ "bSortable": false },
{ "bSortable": true },
{ "bSortable": false },
{ "bSortable": true }
],
"oLanguage": {
"sEmptyTable": "No results"
}
});
I have had this working but I've changed something at some point and it's now stopped. Any ideas?
EDIT:
OK, oddly enough, this seems to work fine if there are no results for clicking on .view-unread-rows.
Still no clue though.
$(this).on('click', '.view-unread-rows', function(e) { ...

Categories