How to stay on the active page in jquery DataTable - javascript

I have several data listed on the jquery dataTable and its done pagination by the DataTable plugins default. I want to get the current page of the dataTable while processing the data and set that page into active after the action is processed and reload the data.

See this fiddle. You can see how to get the current pages. In the JSFiddle you can try refresh browser. Example let say the current page now is 3. When you refresh the browser, you still in page 3.
To solve your problem want to go back to the last page when editing or deleting row, u must use this option to make jquery datatable remember where the last page. Jquery Datatable will save the state of a table (its paging position, ordering state etc). The state saving method uses the HTML5 localStorage and sessionStorage APIs for efficient storage of the data. See this link to read more detail about it. State saving
"bStateSave": true
JSFiddle Link
Fiddle Demo
Javascript code
$(document).ready(function() {
var table = $('#example').DataTable({
"sPaginationType": "full_numbers",
"bStateSave": true
});
$("#example").on('page.dt', function () {
var info = table.page.info();
$('#pageInfo').html('Currently showing page ' + (info.page + 1) + ' of ' + info.pages + ' pages.');
});
} );

Use only stateSave: true
like this:
$(document).ready(function() {
$('#tableId').DataTable( {
stateSave: true
} );
})

Copied from Datatable
var table = $('#example').DataTable( {
ajax: "data.json"
} );
setInterval( function () {
table.ajax.reload( null, false ); // user paging is not reset on reload
}, 30000 );
Pass null, false on reload function to stay on that page while reloading the table. See ajax.reload() documentation for more information.

See the dataTables documentation which provides a call back function from which you can obtain the current page:
$('#example').dataTable( {
"drawCallback": function( settings ) {
var api = new $.fn.dataTable( settings );
// Output the data for the visible rows to the browser's console
// You might do something more useful with it!
console.log( api.rows( {page:'current'} ).data() );
}
});

Add this where you are initializing datatable
"drawCallback": function( settings ) {
alert ( 'You are on ssame page' );
}
It works for me :)

Related

How do i reload my dataTable?

im having some problems with reloading the dataTable plugin after insert data. I can do it if not using the dataTable jQuery plugin but i need to combine both.
Here is the code:
$('#tabela').DataTable({
pageLength: 25,
dom: 'Bfrtip'
});
When I insert the data I use:
$('#insert_form').on("submit", function(event){
event.preventDefault(); //stops page refresh
$.ajax({
url:"testes/insert.php", //file to insert data into DB
method:"POST",
data:$('#insert_form').serialize(),
beforeSend:function(){
$('#insert').val("Inserting");
},
success:function(data){
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#participantes_table').html(data);
}
});
});
Now my question is, how do I reload the data in the dataTable?
Best regards,
Fábio Peixeiro
EDIT:
I followed this video:
https://www.youtube.com/watch?v=5wDc47jcg0o
You need to use datatable function
var table = $('#tabela').DataTable()
table.ajax.reload( null, false );
I've used table.draw() to do this in the past.
Description
When you perform an action such as adding or deleting a
row, changing the sorting, filtering or paging characteristics of the
table you'll want DataTables to update the display to reflect these
changes. This function is provided for that purpose.
https://datatables.net/reference/api/draw()
So I think you can do the following:
var table = $('#tabela').DataTable({
pageLength: 25,
dom: 'Bfrtip'
});
$('#insert_form').on("submit", function(event) {
event.preventDefault(); //stops page refresh
$.ajax({
url:"testes/insert.php", //file to insert data into DB
method:"POST",
data:$('#insert_form').serialize(),
beforeSend:function(){
$('#insert').val("Inserting");
},
success:function(data){
$('#insert_form')[0].reset();
$('#add_data_Modal').modal('hide');
$('#participantes_table').html(data);
table.draw(); // replace table with whatever your reference to the datatable is
}
});
});
You can use ajax reload
$('#myTable').DataTable().ajax.reload();

Jquery Datatables Colvis fires preDrawCallback and DrawCallback twice on column item click

Please refer to my test case
https://jsfiddle.net/1c3Lmace/13/
This is my code
$(document).ready(function() {
$('#example').DataTable( {
dom: 'C<"clear">lfrtip',
"fnPreDrawCallback": function( oSettings ) {
alert('pre');
},
"fnDrawCallback" : function() {
alert('+++++');
}
} );
} );
When you go to Show/Hide Columns and click on any column item you will see that each preDrawCallBack and drawCallback event fires twice.
Does anyone having any idea why it happens.
I want to show a loader before data loads and hide it and when data is successfully loaded. Any help is appreciated
Thanks
Indeed the events are fired twice but only when sorted column visibility is being toggled.
I see no point in showing loading indicator for client-side processing, column visibility changes occur very fast. For server-side processing, there is processing option already available.
You can do something like this. But I had to put an alert() because columns are toggled very fast and Processing... message disappears quickly.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'C<"clear">lfrtip',
processing: true,
drawCallback : function() {
$('.dataTables_processing', $('#example').DataTable().table().container()).hide();
}
} );
} );
$('#example').on( 'column-visibility.dt', function ( e, settings, column, state ) {
$('.dataTables_processing', $('#example').DataTable().table().container()).show();
alert('Column visibility is toggled');
} );
See this jsFiddle for code and demonstration.

how to enable and disable paging from jquery dataTables on button click

Following is the code found in data table website in order to remove the paging.
$(document).ready(function() {
$('#example').DataTable( {
"paging": false
} );
} );
My question is how to enable and disable paging on button click.
as when i call DataTable function second time to same table. It shows error that data table is already initiated and im calling it second time.
simply recreate the dataTable using destroy: true and paging:
I wanted to show only the first 10 rows of the table, but still be able to sort the whole table. But I also wanted the ability to click a link and show the whole table.
Here's what I did: (my table is "ka_ad")
First, turn on paging
table_ad = $('#ka_ad').DataTable({
paging: true,
});
Second (optional: I didn't want to display the datatable pagination links and element, so I hid them with css
#ka_ad_length{display: none;}
#ka_ad_paginate{display: none;}
Lastly, toggle the bPaginate setting (I have a button with an ID of "test"):
$('#test').click( function () {
//console.log(mytable.settings()[0]['oFeatures']['bPaginate'] );
if(table_ad.settings()[0]['oFeatures']['bPaginate'] == false)
{
table_ad.settings()[0]['oFeatures']['bPaginate'] = true;
$('#test').html('Show All Rows');
}
else
{
table_ad.settings()[0]['oFeatures']['bPaginate'] = false;
$('#test').html('Show Fewer Rows');
}
table_ad.draw();
});
Try like this.
var oTable;
$(document).ready(function() {
oTable = $('#example').DataTable( {
"paging": false
} );
$('.btn').click( function () {
oTable.paging= false;
oTable.fnDraw();
});
} );
try this:(but i don't guarantee, because, i haven't tested)
var oTable = $('#example').dataTable();
// get settings object after table is initialized
var oSettings = oTable.fnSettings();
oSettings.paging = false;
$(".button").click(function(){
oSettings.paging = !oSettings.paging;
});
https://www.datatables.net/forums/discussion/16373/enable-disable-features-after-initializing-the-table

Persistance of expanded detail Jquery Datatables

I have an asp.net web application that has the option to provide pseudo-realtime data about an automation machine. I am using the JQuery Datatables with an ajax datasource. I have an interval that reloads the data source every set amount of time (which updates my datatable asynchronously from the db) and then redraws the table.
I am also using the responsive plug in for the table, so the web app can be accessed well from phone sized devices. I have set this up so that it drops all of the columns but the first(primary) column and adds the other columns a child (detail) record. This is where my app breaks and my phone users loose usability. This is because whenever the table redraws detail records snaps close. Therefore if a phone user is looking at the table and has expanded the detail of a record the record will snap shut as soon as the table is redrawn.
My solution would be to capture the opened detail and then at the time of redraw re-open the detail. I believe I have captured the detail successfully but everything I have found to try to programmatically expand it has not worked.
$(document).ready(function () {
var row;
var tr;
var table = $('#myDataTable').DataTable({
autoWidth: false,
processing: false,
stateSave: true,
sAjaxSource: '#Url.Action("GetDropData", "Drops")',
"columns":
[
{ "width": "10%" },
{ "width": "50%" },
{ "width": "40%" }
]
});
var timer = setInterval(function () {
table.ajax.reload(null, false);
}, 1000);
//flag is used to determine if last click expanded a detail
var flag = false;
//If table is clicked find closest 'tr'
table.on('click', 'tr', function () {
tr = $(this).closest('tr');
row = table.row(tr);
//was click a detail expansion
if (row.child.isShown()) {
flag = true;
}
})
// event fires after ajax call completes (reload and redraw)
$('#myDataTable').on('xhr.dt', function () {
if (flag) {
$(tr).addClass('row_selected');
}
});
});
If you can tell why the detail isn't expanded or a better way solution please let me know. I do have a temporary solution in place that just pauses the interval when the detail button is clicked but this makes my phone users table not update.
If you're using Datatables 1.9 and earlier use fnDrawCallback().
If you're using Datatables 1.10+ use drawCallback().
Both of these callbacks go in your datatables initializer and can take your row detail opening code.
$(document).ready( function() {
$('#example').dataTable( {
"fnDrawCallback": function( oSettings ) {
//open detail row here
}
} );
} );

Custom REST datasource with jQuery DataTables

I have a REST endpoint with a page and size parameter:
http://someservice.com/api/accounts/10/0
In this example it returns the first page and every page has 10 records.
Now, I want to use DataTables, and found this example on StackOverflow, where I can add the data to the table from the REST response to the table.
But, this way, I add all the data to the table. I want to be able to add the data page per page, and make requests to the endpoints page per page. For example, on page load, I make a REST request for that page. When I click to the second page, I make a request again, for the data for that one.
Any way to do this in DataTables?
This should work:
function fnGetKey( aoData, sKey ){
for ( var i=0, iLen=aoData.length ; i<iLen ; i++ ){
if ( aoData[i].name == sKey )
return aoData[i].value;
}
return null;
}
$('#example').dataTable( {
"bServerSide" : true,
"sAjaxSource" : "http://someservice.com/api/accounts/10/0", //first page
"sPaginationType": "two_button",
"fnServerData": function ( sSource, aoData, fnCallback ) {
var startIndex = fnGetKey(aoData, "iDisplayStart")
var length = fnGetKey(aoData, "iDisplayLength")
sSource="http://someservice.com/api/accounts/"+length+"/"+(startIndex/length + 1)
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
} );
}
});
So when you click on next page or previous, you need to calculate at what page you are now and by changing source you do a trick.

Categories