We Keep Coding

Multi-select checkbox in dataTable with all pages

When i select first record in first page and select 2nd record in second page and moving back to first page it will disappear the checkbox, and same things happen in select all page also please help me on this.
please find the attached screenshot
var oTable = $('#crm_index_table').dataTable( {
bProcessing: true,
sPaginationType: "full_numbers",
bServerSide: true,
"bStateSave": true,
'checkboxes': {
'selectRow': true
},
"aoColumnDefs": [
{ "bSearchable": false, "aTargets": [-3, -2, -1 ] },
{ "bSortable": false, "aTargets": [-8, -3, -1] }
],
"oLanguage": {
"sLengthMenu": "Show _MENU_ records"
},
sAjaxSource: $('#crm_index_table').data("source"),
"fnDrawCallback": function(nRow, aData) {
$('#check_all').click(function(e) {
$(".selectable_candidate").prop('checked', $(this).prop('checked'));
});

JQuery dataTable remove id and class result row need to search in values

I am using DataTable and Search with below code
$(document).ready(function () {
var userTable = $('#result').dataTable({
"aaSorting": [],
"bInfo": true,
"oSearch": {"sSearch": ""},
"bAutoWidth": false,
"bLengthChange": false,
"bPaginate": false,
"scrollX": true,
"aoColumns": [
null,
null,
null,
null,
null,
]
});
$('#user-search').keyup(userTable, function(){
console.log($(this).val());
});
userTable.fnFilter($(this).val());
$(".dataTables_filter").hide();
});
But my search gives result for id and class also
example if I search 28, it gives result for id=28
or if I search for "green" it gives row with class=green.
In order to remove this id, class, commented code etc what to do ?

I didn't understand well your question, but if you want to exclude table columns from the global search you can do that with { "bSearchable": false }, so for example if idand classcolumns are the first and second ones, you should do:
var userTable = $('#result').dataTable({
"aaSorting": [],
"bInfo": true,
"oSearch": {"sSearch": ""},
"bAutoWidth": false,
"bLengthChange": false,
"bPaginate": false,
"scrollX": true,
"aoColumns": [
{ "bSearchable": false },
{ "bSearchable": false },
null,
null,
null,
]
});

How can I combine javascript(s) in web page?

I have a website with the following:
...
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js"></script>
I need to combine these scripts into one:
<script>$(document).ready(function() {$('#cccr').DataTable( { "order": [[ 0, "desc" ], [2,"asc"], [1,"asc"]], "aaSorting": [], "bPaginate": false, "bLengthChange": true, "bFilter": true, "bSort": true, "bInfo": true, "sPaginationType": "full_numbers", "sScrollY": "25rem", "bStateSave": false, "autoWidth": true });} );</script>
<script>$(document).ready(function() {var oTable = $('#cccr').dataTable();oTable.fnFilter( 'parry' );} );</script>
<script>$(document).ready(function() {new $.fn.dataTable.Responsive( table );} );</script>
Problem is that I want the page to be responsive and having the responsive js invocation code separate screws everything up. How can I safely combine these lines? (Preferably w/o "$(document).ready".

like this
<script>
$(document).ready(function() {
$('#cccr').DataTable({
"order": [
[0, "desc"],
[2, "asc"],
[1, "asc"]
],
"aaSorting": [],
"bPaginate": false,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"sPaginationType": "full_numbers",
"sScrollY": "25rem",
"bStateSave": false,
"autoWidth": true
});
var oTable = $('#cccr').dataTable();
oTable.fnFilter('parry');
new $.fn.dataTable.Responsive(table);
});
</script>

jQuery DataTable column filters with delay search until 3+ characters or enter key

I'm try to achieve that, but so far not working. Tried those suggestion either in stackoverflow or datatables forum so far no luck yet. I tried the fnSetFilteringEnterPress of jQuery DataTables: Delay search until 3 characters been typed OR a button clicked but so far can't make it work, any suggestion. Any advise would be appreciate. Thanks
var oTable;
var ws_GetData = 'Default.aspx/GetList';
$(document).ready(function () {
oTable = $('#tbl1').dataTable({
"bJQueryUI": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"bProcessing": true,
"bFilter": true,
"bServerSide": true,
"aoColumns": [{ "sWidth": "5%", "bSortable": false },
{ "sWidth": "3%", "bSortable": false },
{ "sWidth": "5%", "bSortable": false },
{ "bSortable": false }, { "bSortable": false },
{ "bSortable": false }, { "bSortable": false },
{ "sWidth": "5%", "bSortable": false },
{ "sWidth": "2%", "bSortable": false}],
"sAjaxSource": ws_GetData,
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
var page = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
aoData.push({ "name": "pageNo_1", "value": page });
ResultData(sSource, aoData, fnCallback);
}
}).columnFilter({ //sPlaceHolder: "head:before",
aoColumns: [{ "sWidth": "5%", type: "text" },
{ "sWidth": "3%", type: "select", values: ['00', '02'] },
{ "sWidth": "5%", type: "text" },
{ type: "date-range" },
{ type: "text" },
{ type: "text" },
{ type: "number-range" },
{ "sWidth": "5%", type: "text"}]
});
});
function ResultData(sSource, aoData, fnCallback) {
$.ajax({
type: "GET",
url: sSource,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: aoData,
async: true,
beforeSend: function () {
// SHOW the overlay:
$('#overlay').show();
},
complete: function () {
// HIDE the overlay:
$('#overlay').hide();
},
success: function (result) {
var myObject = JSON.parse(result.d);
fnCallback(myObject);
},
error: function (errMsg) {
alert(errMsg);
}
});
}

Maybe this plugin might be of some help or give you an idea on how to continue:
Filter on Return
Add it to your script like this:
$(function() {
$.fn.dataTableExt.oApi.fnFilterOnReturn = function(oSettings) {
var _that = this;
this.each(function(i) {
$.fn.dataTableExt.iApiIndex = i;
var $this = this;
var anControl = $('input', _that.fnSettings().aanFeatures.f);
anControl.unbind('keyup').bind('keypress', function(e) {
//here's the part that you might need to modify:
if (e.which == 13) {
$.fn.dataTableExt.iApiIndex = i;
_that.fnFilter(anControl.val());
}
});
return this;
});
return this;
};
$('#datatable').DataTable({
"oLanguage": {
"sSearch": "Filter Data"
},
"iDisplayLength": -1,
"sPaginationType": "full_numbers"
}).fnFilterOnReturn();
});
Working example in this Plunker

How to show a dialog on icon click event inside a cell in Datatable?

In My datatable custom directive, I have three action icons in a cell.
$(document).ready(function () {
var oTable = $("#elem").dataTable({
'bJQueryUI': false,
'sScrollY': '300px',
'bScrollInfinite': true,
'bSearchable': true,
'bScrollCollapse': true,
'sDom': 'tSi',
"bDeferRender": true,
'bPaginate': true,
'aaSorting': [
[1, 'asc']
],
'aaData': scope.datasource,
"fnRowCallback": processRow,
"aoColumnDefs": [{
"bSortable": true,
"bSearchable": true,
"sWidth": "20%",
"sTitle": "Name",
"sName": "name",
"aTargets": [0],
"mData": "name",
"mRender": function (data, type, full) {
return '' + data + ' ';
}
}, {
"bSortable": true,
"bSearchable": true,
"sWidth": "18%",
"sTitle": "Types",
"sName": "types",
"aTargets": [1],
"mData": "types"
}, {
"bSortable": true,
"bSearchable": true,
"sWidth": "10%",
"sTitle": "File Type",
"sName": "fileType",
"aTargets": [2],
"mData": "fileType"
}, {
"bSortable": true,
"bSearchable": true,
"sWidth": "18%",
"sTitle": "Modified Time",
"sName": "modifiedTime",
"aTargets": [3],
"mData": "modifiedTime"
}, {
"bSortable": false,
"bSearchable": true,
"sWidth": "25%",
"sTitle": "Action Buttons",
"aTargets": [4],
"mData": "",
"mRender": function () {
return '<div class = "center">
<span>
<i class = "glyphicon-info-sign glyphicon"
id="info" style="color:#32a5e8"
onmouseover="this.style.color=\'crimson\'"
onmouseout="this.style.color=\'#32a5e8\'">
</i>
</span>
<i class = "glyphicon-edit glyphicon" style="color:#32a5e8"
onmouseover="this.style.color=\'crimson\'"
onmouseout="this.style.color=\'#32a5e8\'" ng-click="">
</i>
<span>
<i class = "glyphicon-remove glyphicon" style="color:#32a5e8"
onmouseover="this.style.color=\'crimson\'"
onmouseout="this.style.color=\'#32a5e8\'" ng-click="">
</i>
</span>
</div>';
}
}]
});
$("#elem tbody tr td:eq(4)").on('click', function () {
var data = oTable.fnGetData(this);
console.log("clicked inside table -- data: ", oTable.fnGetData());
var position = oTable.fnGetPosition(this);
console.log("clicked position inside table -- position: ", position);
});
});
After clicking on "info" icon, I need to show a message in popover.
Now,I have tried with fnGetPosition() method which returns the same position for all the icons inside the cell. If I can differentiate their position values, it will be easy for me to show the dialog on "info" icon click.
How can I work with it now? Or is there another way to do this?

$(document).ready(function() {
var oTable = $("#elem").dataTable({
'bJQueryUI':false,
'sScrollY': '300px',
'bScrollInfinite':true,
..........
..........
});
$("#elem tbody").delegate("tr i", "click", function (e) {
e.preventDefault();
var self = $(this);
var pos = self.closest('tr').index();// <-- this will give you row index.
if (self.hasClass('glyphicon-edit')) {
// Do something
}else if (self.hasClass('glyphicon-info-sign')){
// Do something
}else if(self.hasClass('glyphicon-remove'){
// Do something
}
});