javascript - jquery datatable retain row highlight after reload -
i reloading datatable on 10 second intervals. when user clicks on row, row highlight. when datatable reloads, highlight gone.
here shortened code 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 above works how it's supposed work. need retain row highlight after datatable reloads.
please , thank in advance.
also...
i attempted answer post: jquery datatable highlight drops off after reload
but scrapped row no longer highlights.
kindly update js file below changes. below code save row clicked in global parameter , focus clicked row after ajax call.
var gblindex = 0; //this 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(); // set focus/highlight row }, 30000); // highlight row $('#example1 tbody').on('click', 'tr', function() { $('#example1 tbody > tr').removeclass('selected'); $(this).addclass('selected'); gblindex = $(this).index(); // save index clicked }); });
Comments
Post a Comment