JqGrid unable to drag search modal on tablet - javascript

I implemented jqgrid for my data grid, and enabling its search feature.
When I use desktop browser, I can drag the search modal like normal. however, I cant do that when I drag it on tablet using touch.
Does anyone know how to enable it so I can drag the search modal on tablet device? This is my grid snippet code
$grid = $('#' + gridId);
var ListOfColName = ['Client PID', 'Date Assessed', 'Date Superseded', 'Client Name','Create From Existing', 'Detailed Care Plan'];
var ListOfColModel = [{ name: 'ClientPID', index: 'ClientPID', editable: true },{ name: 'ConsumerCarePlanId', formatter: ViewDetailLinkFormat, align: 'left', search: false}];
$grid.jqGrid({
datatype: 'json',
url: '../../JsGridService/ConsumerCarePlanSearchService.svc/GetCarePlanList',
jsonReader: { repeatitems: false },
loadui: "block",
mtype: 'GET',
rowNum: 5,
rowList: [5, 10, 20, 30],
viewrecords: true,
colNames: ListOfColName,
colModel: ListOfColModel,
pager: '#' + pagerId,
sortname: 'ClientPID',
sortorder: 'desc',
height: "100%",
width: "100%",
prmNames: { nd: null, search: null },
caption: 'Care Plan List',
autowidth: true,
rownumbers: true,
loadonce: true
});
$.extend($.jgrid.search, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: false,
closeOnEscape: true,
closeAfterSearch: true,
overlay: 0
});
Thank You.

Touch events on a mobile device do not trigger the same way that Click Events trigger in the browser. This is something that I have been battling with as well, I have a custom map dragging application that I wrote and it is impossible to drag the map on the touch screen.
EDIT:
I used the following to map the touch events:
$('#zoomIn').on('click', function( e ) {
e.stopPropagation();
var scale = parseInt(mapscale) - 1;
rescaleMap( scale );
});
$('#zoomOut').on('click', function( e ){
e.stopPropagation();
var scale = parseInt(mapscale) + 1;
rescaleMap( scale );
});
$('#zoomIn').on('touchstart', function( e ) {
var scale = parseInt(mapscale) - 1;
rescaleMap( scale );
e.stopPropagation();
});
$('#zoomOut').on('touchstart', function( e ){
var scale = parseInt(mapscale) + 1;
rescaleMap( scale );
e.stopPropagation();
});
I included the on-click handler so you could see I was implementing it twice (This bad practice, code should really be in a function call to avoid duplication and following DRY patterns) once for standard mouse interface, and once for the mobile interface.
Later on in my code I have the following that gets called inside of document ready:
function touchHandler(event) {
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type = "mousemove"; break;
case "touchend": type = "mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
This is treating the touch events as mouse events, and allowing them to function within normal jQuery mouse move events. This code is lifted and adapted directly from this answer here: JavaScript mapping touch events to mouse events
The draggable handle is not usable (at least not on the devices I have tested on) because it is still looking specifically for mouse events.

Related

editurl:'client array' data to be shown in jqgrid but should not save that data to database

var specificatonsData = [];
function initGridForTransactions(gridID, gridPagerID) {
var grid_selector = gridID;
var pager_selector = gridPagerID;
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid('setGridWidth', $("#page-wrapper").width());
})
var parent_column = $(grid_selector).closest('[class*="col-"]');
$(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
setTimeout(function () {
$(grid_selector).jqGrid('setGridWidth', parent_column.width());
}, 0);
}
})
$(grid_selector).jqGrid({
data: specificatonsData,
datatype: "local",
colNames: ['Id','Specification', 'Abbreviation'],
colModel: [
{ name: 'Id', width: 80,key:true },
{ name: 'specification', index: 'Id', key: true, width: 300 },
{ name: 'abbreviation', width: 300 },
],
cmTemplate: { editable: true },
cellsubmit: 'clientArray',
editurl: 'clientArray',
viewrecords: true,
rowNum: 4000,
gridview: true,
rowList: [4000],
pager: pager_selector,
altRows: true,
loadonce: true,
multiselect: false,
multiboxonly: false,
sortname: 'Specification',
sortorder: "asc",
cellEdit: false,
iconSet: "fontAwesome",
onSelectRow: function (rowId, status, e) {
var dealerFeatures = $("#editor").text();
var selectedFeature = rowId;
selectedFeature = selectedFeature.replace(/(\s+)/, "(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("(" + selectedFeature + ")", "gi");
dealerFeatures = dealerFeatures.replace(pattern, "<mark>$1</mark>");
//dealerFeatures = dealerFeatures.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, "$1<mark>$2</mark>$4");
dealerFeatures = dealerFeatures.replace(/(<mark>[<>]*)((<[>]+>)+)([<>]*<\/mark>)/, "$1<mark>$2</mark>$4");
dealerFeatures = dealerFeatures.replace(/\n/g, '<br>\n');
$("#editor").html(dealerFeatures);
},
gridComplete: function () {
$(grid_selector).setColProp('Approve', { editoptions: { value: '' } });
},
loadComplete: function () {
var table = this;
setTimeout(function () {
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
}).navGrid(pager_selector, { edit: true, add: true, del: false },
{
url: '/Activity/SaveSpecification',
closeAfterAdd: true,
closeAfterEdit: true,
afterSubmit: function () {
getAbbrData();
return [true, '', ''];
}
});
jQuery(grid_selector).sortableRows();
function updatePagerIcons(table) {
var replacement =
{
'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
})
}
function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({ container: 'body' });
$(table).find('.ui-pg-div').tooltip({ container: 'body' });
}
$(document).one('ajaxloadstart.page', function (e) {
$(grid_selector).jqGrid('GridUnload');
$('.ui-jqdialog').remove();
});
}
I will save data to database only when I click on external Submit button.
When I click on edit button the data is showing in a popup and when I click on the save button the data is getting to the database and showing in the jqgrid.
But I have a new requirement where I have to show the data in the jqgrid when click on save button but should not save to the database.
Thanks in advance.
If you use Guriddo jqGrid JS then you can set url in edit options in your navigator to be clientArray - i.e
...navGrid(pager_selector, { edit: true, add: true, del: false },
{
url: 'clientArray',
closeAfterAdd: true,
closeAfterEdit: true,
afterSubmit: function () {
getAbbrData();
return [true, '', ''];
}
});
This will save the data locally.
The code, which you posted contains many small bugs. For example,
you use url: '/Activity/SaveSpecification' as form Edit options (not for Add form) - see navGrid call. You should remove the option to make editurl: 'clientArray' working
you use key:true in more as one column. It's not allowed. One can use it only in one column, which contains unique values.
the usage of index: 'Id' property in colModel for the column name: 'specification' is probably one more bug, which can make wrong sorting and filtering in the column.
your current code contains call of .setColProp('Approve', { ... });, which is wrong, because your colModel don't contains the column 'Approve'
the option sortname: 'Specification' is wrong too, because the value of sortname should be the value of name property from colModel (like sortname: 'specification' for example, if you'll remove index: 'Id' property from the column).
Additionally the usage of rowNum: 4000 can essentially reduce the performance of the grid in case of large grid. If real number of rows is about 4000, then it's much more effective to use local paging of data. The monitor allows to display only about 20-25 rows. Thus it's recommended to use pager with such small rowNum. Users can use paging buttons to go to the next page.

jqGrid inline editing not working after adding new row

I'm currently using free-jqGrid version 4.14.1 (using cdn hyperlink). I would like to let the users add a new row with their input values, and edit the row if they want to make any change by clicking the row. For adding new row, I created an adding button (not using jqGrid pager).
I'm now facing two different issues:
1) I refered this demo for inline editting. According to this demo code, I need to use the line
grid.jqGrid('restoreRow', lastSelection);
However, with this line, everytime I am adding new row, the previous row is deleted and only newly added row is displayed. Please check this fiddle.
2) Due to 1), I commented out that line(I don't think I supposed to do that for proper functioning), and tried to run. The previously added rows remain after adding new row, but all rows displayed is showing in textbox like this(fiddle):
What I would like to have is only after user clicks the row to modify, it changes to the textboxes like the guriddo demo.
I have not found any post related to this issues. Is there anyone please help me??
============================================
Add:
I started with some base table value just for verification. The base data rows were functioning as I wanted (click the row for modification), but the new rows were not. It seems like new rows are not selected and not focused when I click, and not exiting the edit mode after hitting enter key..
============================================
============================================
The below is the code of grid just for reference:
$(document).ready(function () {
Load_Bin();
$('#Bin-QtyBin').focus();
$('#btnEnter-Bin').click(function () {
var valNumBin = $('#Bin-numBin').val();
//if bins are dropbox: select enabled one
var valQtyBin = $('#Bin-QtyBin').val();
var paramRow = {
rowId: "new_row",
initdata: {
numBin: valNumBin,
QtyPutAway: valQtyBin
},
position: "first" //"last"
}
$("#tbBin").jqGrid('addRow', paramRow);
$('#Bin-numBin').val('');
$('#Bin-QtyBin').val('');
});
});
var lastSelection;
function Load_Bin() {
var tbBinArea = $('#tbBin');
tbBinArea.jqGrid({
datatype: "local",
colModel: [
{ label: 'Bin', name: 'numBin', sorttype: 'text', searchoptions: { clearSearch: true }, width: 310, editable: true },
{ label: 'Put Away Qty.', name: 'QtyPutAway', sorttype: 'number', searchoptions: { clearSearch: true }, width: 310, editable: true }],
rowNum: 10,
rowList: [10, 15, 30, "10000:All"],
prmNames: {
page: 'defaultPageNumber',
rows: 'rowsPerPage'
},
//forceClientSorting: true,
rownumbers: true,
//autowidth: true,
viewrecords: true,
loadonce: true,
multiselect: false,
multiPageSelection: false,
iconSet: "fontAwesome",
pager: true,
height: 250,
onSelectRow: editRow,
searching: {
searchOperators: true,
defaultSearch: 'cn',
closeOnEscape: true,
searchOnEnter: false,
multipleSearch: true
}
});
}
function editRow(id) {
if (id && id !== lastSelection) {
var grid = $("#tbBin");
grid.jqGrid('restoreRow', lastSelection);
grid.jqGrid('editRow', id, { keys: true });
lastSelection = id;
}
};
(p.s. thanks to the owner of this fiddle since I was struggling to move the code to fiddle, and sorry for not addressing him/her since I lost the original answer link for that fiddle... )
I ended up just reload the whole grid after adding new row. It works fine, except that newly added line does not turn to edit mode since it doesn't detect whether user clicks it or not since it is already highlighted when it was created..
After creating new row, just added this code:
var reloaddata = $('#tbBin').jqGrid("getGridParam", "data");
$('#tbBin')
.jqGrid('setGridParam',
{
datatype: 'local',
data: reloaddata
})
.trigger("reloadGrid");

"pager: true" vs "pager: #someid" in jqGrid, how to use them properly?

I am playing a little bit with the jqGrid setup and some things aren't clear to me like the proper usage of pager. The idea is to add some custom buttons to the top and bottom bars.
This is the code I have been playing with:
$("#order_logs").jqGrid({
url: 'api_order_logs',
datatype: "json",
colModel: $('#colmodel').data('values'),
width: 980,
height: 300,
pager: true,
toppager: true,
hoverrows: true,
shrinkToFit: true,
autowidth: true,
rownumbers: true,
viewrecords: true,
rowList: [25, 50, 100],
data: [],
rownumWidth: 100,
iconSet: "fontAwesome",
gridview: true,
sortable: {
options: {
items: ">th:not(:has(#jqgh_grid_cb,#jqgh_grid_rn,#jqgh_grid_actions),:hidden)"
}
},
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
cell: '',
repeatitems: false
},
cmTemplate: {autoResizable: true, editable: true},
autoResizing: {compact: true, resetWidthOrg: true},
autoresizeOnLoad: true,
forceClientSorting: true
}).jqGrid('navGrid', '#gridpager', {
edit: false,
add: false,
del: false,
search: false,
refresh: true,
refreshstate: "current",
cloneToTop: true
}).jqGrid('navButtonAdd', '#gridpager', {
caption: 'Export',
title: 'Export',
buttonicon: 'fa fa-download',
onClickButton: function () {
// #todo
}
}).jqGrid('navButtonAdd', '#gridpager', {
caption: 'Email',
title: 'Email',
buttonicon: 'fa fa-envelope-o',
onClickButton: function () {
// #todo
}
}).jqGrid('navButtonAdd', '#gridpager', {
caption: 'Print',
title: 'Print',
buttonicon: 'fa fa-print',
onClickButton: function () {
// #todo
}
});
With the usage of pager: true the grid display as follow:
Meaning no custom buttons at top nor bottom.
With the usage of pager: #gridpager the grid display as follow:
Meaning only custom buttons on the bottom bar but not on the top one.
Certainly I am missing something but I can't find what that is. I've been checking some docs here, here and last here but still not clear to me how to deal with this in the right way.
In addition to this if you notice I am trying to use the fontAwesome iconset but images are missing, should I add the CSS file on my templates?
PS: I am using the latest version of jqGrid-free
It's very easy. Which sense is repeating the same value '#gridpager' as jqGrid option, as the parameter of navGrid and navButtonAdd?
jqGrid can contain maximal two pagers: bottom pager and top pager. The top pager can be created by usage of the option toppager: true. You don't use the option toppager: true. Then the only legal value of the first parameter of navGrid and navButtonAdd will be '#gridpager'. Correct?
Now, one can use getGridParam method to get any option of jqGrid after the grid is created. For example one can get the value of pager parameter using
var pagerIdSelector = $("#order_logs").jqGrid("getGridParam", "pager");
Free jqGrid allows to use
}).jqGrid('navGrid', { ... });
instead of
}).jqGrid('navGrid', '#gridpager', { ... });
It tests the type of the first parameter. If the type of the first parameter isn't "string" then it uses $(this).jqGrid("getGridParam", "pager") to get the value.
Now we can remind about the possibility to use toppager: true to create top pager. In the case jqGrid creates an empty <div> for the top pager, it generates, it assigns unique id for the <div>. Finally jqGrid changes the value of toppager parameter from true to the value like #order_logs_toppager, there the first part of the id (order_logs) is the id of the grid. Free jqGrid allows to use true as the value of pager parameter. In the case one can simplify the HTML and remove unneeded empty div
<div id="gridpager"><div>
If one uses both pager: true and toppager: true options and uses navGrid or navButtonAdd without pager parameters then jqGrid places the buttons on both pagers. If you need to place some buttons only on one pager then you can use the code like below. If place some buttons on both pagers and then place another buttons on specific pagers:
var $grid = $("#order_logs");
$grid.jqGrid({
...
pager: true,
toppager: true,
...
});
// create nav bar and place Refresh button on both pagers
$grid.jqGrid('navGrid', {
edit: false,
add: false,
del: false,
search: false,
refreshstate: "current",
});
var bottomPagerIdSelector = $grid.jqGrid("getGridParam", "pager"),
topPagerIdSelector = $grid.jqGrid("getGridParam", "toppager");
// place Export button only on bottom pager
// and Email button only on top pager
$grid.jqGrid('navButtonAdd', bottomPagerIdSelector, {
caption: 'Export',
title: 'Export',
buttonicon: 'fa fa-download',
onClickButton: function () {
// #todo
}
}).jqGrid('navButtonAdd', topPagerIdSelector, {
caption: 'Email',
title: 'Email',
buttonicon: 'fa fa-envelope-o',
onClickButton: function () {
// #todo
}
});
The final remarks. You use forceClientSorting: true option, which works only in combination with loadonce: true. jqGrid can sort all the data only it it has all data.
The value of sortable parameter is wrong. The selectors like jqgh_grid_cb contains "grid" in the middle, which should be the id of the grid. In your case it could be "order_logs" instead of "grid" (jqgh_grid_cb shoule be replaced to jqgh_order_logs_cb).

Upload Multiple files of any format in Jqgrid.?

Am a newbie to Jqgrid. I dont know how to upload multiple files of any format in jqgrid. I searched for examples i could't find anything in google.It would be really helpful,that how multiple files can be uploaded of any format. Thanks for the help..!
function initjqgridfileupload(table,pager,msg,loadSelID,caption,chkMrk,del ){
$(table).empty();
$(table).GridUnload();
var woid = $("#ID").val();
var mygrid =jQuery(table).jqGrid({
datatype: "local",
height:25,
data:msg,
width: 750,
scrollOffset:0,
//autowidth: true,
colNames:['Id','File','File Name'],
colModel:[
{name:'id',index:'id',hidden: true , width:20,sorttype:"int",resizable:false},
{name:'fileName', width:150,align:"left",hidden: true ,resizable:false,edittype:'select', formatter:'FilesLinks'},
{name:'originalFileName',index:'originalFileName',id:'originalFileName',width:150,align:"center",formatter:'FilesLinks',editable:true,resizable:false,formoptions:{rowpos:1,colpos:1,label:"<font color='red'>File</font>"},editrules:{required:true},edittype:'file',editoptions: {enctype: "multipart/form-data",method:"post"}}
//{name:'originalFileName',hidden: true, width:150,align:"left",edittype:'select', resizable:false}
],
//pager: pager,
rowNum:10,
rowList:[], //disable the page size dropdown
pgbuttons: false, //disable page control like next , back
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: false , // disable current view record text like 'View 1-10 of 100'
//loadOnce:true,
rownumbers:false,
loadComplete: function() {
},
multiselect: del,
gridview : true,
sortname: 'id',
sortorder: "asc",
toppager:true,
caption:caption,
hidegrid: false,
beforeSelectRow: function(rowid, e) {
var $link = $('a', e.target);
if (e.target.tagName.toUpperCase() === "A" || $link.length > 0)
{
return false;
}
}
});
jQuery(table).jqGrid('navGrid',pager,{del:false,add:false,edit:false,search:false,refresh:true,cloneToTop:true},{},{},{},{});
}

Datatables I can't call an onclick event after I paginate?

I am using http://datatables.net/
The demo table on their homepage resembles pretty much the exact same thing that i'm using (pagination, specifically), except each row has an area to click:
<%= Post.title %>
This link opens a jquery UI modal dialog which displays some information which is ajax requested.
Part 1 (solved), see part 2 below
I'm trying to run an onclick event which works normally on page one, but as soon as i go to page 2 (or any others) it stops working. I checked the source to make sure it wasnt doing anything funny in all the code is infact there (all the rows, even the ones hidden by the pagination)
Any ideas?
$(function() {
$('#dialog').dialog({
autoOpen: false,
resizable: false,
maxHeight: 600,
width: 650,
modal: true,
beforeClose: function close() {
$('#dialog').html('');
}
});
$('.show-post').click(function() {
clickLink(this);
return false;
});
});
Thanks to those who answered my question! I fixed that issue.
Part 2
my next 'issue' id like to get to work is... I'm using the left and right arrow keys to allow them to 'scan' to the next or previous row, and display the information. This is as opposed to closing it and then having to click the next one.
I'd like to make it so when you get to the bottom of page one, or top of page two, hidding next/previous respectively will automatically load that page, go to the top (or bottom), then open that dialog for that row on the other page.
heres my click function (i know its kind of probably not structured the best... im new to jquery)
$(document).ready(function() {
oTable = $('#posts').dataTable({
"bJQueryUI": true,
"iDisplayLength": 400,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aLengthMenu": [[-1, 400, 100, 50], ["All", 400, 100, 50]]
});
$(this).keydown(function(e) {
var id = $("#dialog").attr("data-id");
currentPost = $("#posts tr[data-id=" + id + "]");
if (e.keyCode == 39 && $('#dialog').html() != "") {
/* Remove current background */
$(currentPost).blur()
$(currentPost).removeClass("current");
$(currentPost).find("td.sorting_1").removeClass("current");
var next = currentPost.next().find(".show-post");
clickLink(next);
} else if (e.keyCode == 37 && $('#dialog').html() != "") {
/* Remove current background */
$(currentPost).removeClass("current");
$(currentPost).find("td.sorting_1").removeClass("current");
var prev = currentPost.prev().find(".show-post");
clickLink(prev)
}
});
});
heres the actual click function
function clickLink(src) {
var post = $(src);
var id = $(post).parent().parent().attr('data-id');
/* Set background for current line */
$(post).parent().parent().find("td.sorting_1").addClass("current");
$(post).parent().parent().addClass("current");
$('#dialog').attr("data-id", id);
$('#dialog').load('/show-post/' + id, function() {
$.ajax({
type: "POST",
url: "/checkstatus/" + id,
dataType: "html",
error: function(data){
$("#dialog").fadeOut("fast", function() {
$("#dialog").html("<img src='/img/invalid.jpg' alt='invalid' style='margin: 40px auto; display: block;'>").fadeIn("slow");
});
}
});
/* Set Visited */
$(post).parent().parent().removeClass("visited").addClass("visited");
$('#dialog').dialog({
title: post.html(),
beforeClose: function close() {
$(post).parent().parent().find("td.sorting_1").removeClass("current");
$(post).parent().parent().removeClass("current");
},
buttons: {
"Email 1": function() {
$.ajax({
type: "POST",
url: "/get-email/" + id + "/" + "1",
dataType: "html",
success: function(data) {
window.location.href = data + "&subject=" + post.html();
}
});
},
}
});
$('#dialog').dialog('open');
});
return false;
};
The example on the link you provided appears to be adding/removing DOM elements, meaning that elements on subsequent pages probably are not in the DOM on page load. Have you tried using event delegation?
$(<root element>).delegate('.show-post', 'click', function() {
clickLink(this);
return false;
});
Where <root element> can be document but should be set to an ancestor element that is always in the DOM.
.delegate():
Attach a handler to one or more events for all elements that match the
selector, now or in the future, based on a specific set of root
elements.
Source: http://api.jquery.com/delegate
UPDATE
Note that .delegate() is an alias of .on() now, so if you're using jQuery 1.7+ I would just use .on() right from the get-go. Almost the same syntax except the selector and event are swapped: $(<root element>).on('click', '.show-post', function() { ... });
Source: Thanks Greg Pettit, Excellent Comment
Below Code is working Perfectly. When you click the pagination button 'drawCallback' class Call some function after table load.
$("#YourTableID").dataTable({
bJQueryUI: false,
bFilter: false,
bSearchable: false,
bInfo: false,
bAutoWidth: false,
bDestroy: true,
"oLanguage": {
"sEmptyTable": "No Records Found"
},
"sPaginationType": "full_numbers",
"bLengthChange": false,
"iDisplayLength": 5,
aaData: arrv,
aoColumns: [{
sTitle: "Select",
orderable: false,
className: 'select-checkbox',
targets: 0
},
{
sTitle: "Course name"
}, {
sTitle: "Level"
}, {
sTitle: "Study Mode"
}, {
sTitle: "Entry Year"
}, {
sTitle: "Point of Entry"
}, {
sTitle: "Awarding qualification"
}],
drawCallback: function () {
//Some function...
},
select: {
style: 'os',
background: 'color:gray',
selector: 'td:first-child'
},
order: [[1, 'asc']],
});
As #scrappedcola pointed out in the comments, your click handler is lost after pagination. There is a drawCallback function for DataTables you can implement which will fire after the table is "re-drawn" (hence drawCallback). Here is an example:
$('#someId').DataTable({
lengthMenu: [ 25, 50, 100, 200 ],
order: [[ 0, 'asc' ]],
processing: true,
serverSide: true,
stateSave: true,
responsive: true,
bDestroy: true,
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
],
drawCallback: function() {
var api = this.api();
api.$('#someBtnId').click(function() {
// do some click handler stuff
});
}
});

Categories