Multi-select checkbox in dataTable with all pages - javascript

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'));
});

Related

Reset Count using Data Tables on draw

I am currently using Data Tables. I have two tables that Add and Remove data from one table to another. I have a count at the moment that is working somewhat, but when the table draws from one table to another the count is not being reset. It also seems to happen when moving pagination. Is there a way I can get JQuery to set a dynamic id.
Currently, this is what I have:
var selectedContractsTable = $('#catalogueLinkedContractsTable').DataTable({
sAjaxSource: linkedUrl,
columns: [
{ "data": "ID" },
{ "data": "Selected"},
{ "data": "Name"},
{ "data": "ContractType"},
{ "data": "StartDate"},
{ "data": "TerminationDate"},
{ "button": "Action" }
],
serverSide: false,
sDom: 't<"dt-panelfooter clearfix"ip>',
pageLength: pageSize,
bSort: false,
bLengthChange: false,
bSearch: true,
paging: true,
searching: true,
order: [[2, "asc"]],
language: {
emptyTable: "No linked contracts found.",
zeroRecords: "No linked contracts found.",
info: "_START_ to _END_ of _TOTAL_",
paginate: {
first: "First",
previous: "Previous",
next: "Next",
last: "Last"
}
},
columnDefs: [
{
targets: [0],
visible: false
},
{
targets: [1],
visible: false
},
{
targets: [3],
sClass: "hidden-xs hidden-sm contractType"
},
{
targets: [4],
sClass: "hidden-xs fromDate"
},
{
targets: [5],
sClass: "hidden-xs terminationDate"
},
{
data: null,
targets: [6],
sClass: "updateTableRow text-center",
render: function ( data, type, full, meta )
{
var id = data["ID"];
// id number added for testing purposes
var removebuttonData = `<button class=\"btn btn-danger br2 btn-xs fs12 table-btn button-selector-${id}\" id=\"RemoveContractBtn_` + count + `\">Remove</button>`;
count++;
return removebuttonData;
}
}
],
autoWidth: false
});
#* Setup the (Non-Selected) Contracts table (data, search, paging handled server side) *#
count = 0;
var url = "/ClientSetup/GetCatalogueContracts";
var contractsTable = $('#catalogueContractsTable').DataTable({
sAjaxSource: url,
columns: [
{ "data": "ID" },
{ "data": "Selected"},
{ "data": "Name"},
{ "data": "ContractType"},
{ "data": "StartDate"},
{ "data": "TerminationDate"},
{ "button": "Action" }
],
serverSide: true,
sDom: 't<"dt-panelfooter clearfix"ip>',
pageLength: pageSize,
bSort: false,
bLengthChange: false,
bSearch: true,
paging: true,
searching: true,
order: [[2, "asc"]],
language: {
emptyTable: "No contracts found.",
zeroRecords: "No contracts found.",
info: "_START_ to _END_ of _TOTAL_",
paginate: {
first: "First",
previous: "Previous",
next: "Next",
last: "Last"
}
},
columnDefs: [
{
targets: [0],
visible: false
},
{
targets: [1],
visible: false
},
{
targets: [2]
},
{
targets: [3],
sClass: "hidden-xs hidden-sm contractType"
},
{
targets: [4],
sClass: "hidden-xs fromDate"
},
{
targets: [5],
sClass: "hidden-xs terminationDate"
},
{
data: null,
targets: [6],
sClass: "updateTableRow text-center",
render: function ( data, type, full, meta )
{
var id = data["ID"];
// id number added for testing purposes
var addbuttonData = `<button class=\"btn btn-success br2 btn-xs fs12 table-btn button-selector-${id}\" id=\"AddContractBtn_` + count + `\">Add</button>`;
count++;
return addbuttonData;
}
}
],
drawCallback: function( settings ) {
disableInvalidContracts();
},
autoWidth: false
});
https://jsfiddle.net/vo5yfnd4/
Found that I could use meta.row
Which was in the documentation: https://datatables.net/reference/option/columns.render

Row click event not working when datatables is on responsive mode or viewed on mobile

I have a code that looks like this
$('#mtable').DataTable( {
"destroy": true,
"bProcessing": true,
"sAjaxSource": 'link of ajax',
"aaSorting": [],
responsive:true,
"aoColumns": [
{ mData: 'col1' },
{ mData: 'col2' },
{ mData: 'col3' }
],
"columnDefs": [
{ className: 'never', targets: 3 }
]
});
As you can see I have an option called responsive:true
and this is my code when clicking the row and get the value
$('#mtable tbody').on('dblclick', 'tr', function() {
var col1 = $(this).closest('tr').children()[1].textContent;
alert(col1);
});
Its working on the browser but when i click CTRL SHIFT I or turn to responsive the double click does not work.
How can I fix this?

How to search in acending order in datatables plugin

I am using datatables plugin to show the data and the data is displaying in descending order by default. But when i am going to search it gives the result in asceding order and disturbed the display order of data as it gives the result in ascending order.
Thanks in advance
var dTable = $('.MemberListTable').DataTable({
"paging": true,
"bSortable": false,
"lengthChange": true,
"bRetrieve": true,
"bProcessing": true,
"bDestroy": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
// "responsive": true,
"aLengthMenu": [[25, 50, 75], [25, 50, 75]]
});
dTable.order([[6, 'asc']]).draw();
var dTable = $('.MemberListTable').DataTable({
"paging": true,
"bSortable": false,
"lengthChange": true,
"bRetrieve": true,
"bProcessing": true,
"bDestroy": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"order" : [[columnNumber(in your case it is 6) , 'asc']],
// "responsive": true,
"aLengthMenu": [[25, 50, 75], [25, 50, 75]]
});
It will make it by default in ascending order.
If you want results in descending order than add this in your searching logic:
dTable.order([[columnNumber, 'desc']]).draw();
Actually , I really don't understand what you are asking.
If helpful , you are welcome in advance.
Otherwise, you should see this.
https://datatables.net/forums/discussion/26765/change-sort-order-after-search#Comment_72992

How to calculate count of selected checkbox of particular column in jquery datatable

My jquery datatable contain one column which has checkbox. i just want to count number of selected checkboxes from that jquery datatable and stor that count value in one variable for further processing.
This is my code to create data table
oTable = $("#datatable-assessment-Notes").dataTable({
"bPaginate": true,
"bJQueryUI": true,
"bRetrieve": true,
"bDestroy": true,
// "bSorting": true,
"aaSorting": [[6, 'asc']],
"fnDrawCallback": function () {
NoteRadioButtonClick();
},
"aoColumns": [
{ "bSortable": false, "sType": "date", "aTargets": [0] },
{ "bSortable": true, "aTargets": [1] },
{ "aTargets": [2] },
{ "aTargets": [3] },
{ "aTargets": [4] },
{ "bSortable": false, "aTargets": [5] },
{ "bSortable": false, "aTargets": [6] },
{ "bSortable": false, "aTargets": [-1] }, ],
"fnRowCallback": function (nRow, aData) {
var isViewAll = $("#isview-all").val();
if (isViewAll == 1) {
$(".isviewall").remove();
$(".edit_note").remove();
}
return nRow;
}
});
and this is code for checkbox button
<td class="table_heading imp_class_tableData">
#Html.CheckBoxFor(m => item.priority, new { #id = "note_priority", #name = "Note_priority_check" })
</td>

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,
]
});

Categories