I have a datatable. I want to retrieve the ID values of the rows that are selected.
How can I do that.
My codes:
var DatatableRecordSelectionDemo = function () {
var demo = function () {
var url = '/Data/default.json';
$.getJSON(url, function (data) {
var datatable = $('.m_datatable').mDatatable({
data: {
type: "local",
source: data,
pageSize: 10,
saveState: {
cookie: true,
webstorage: true
},
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
// layout definition
layout: {
theme: 'default', // datatable theme
"class": '', // custom wrapper class
scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
height: 550, // datatable's body's fixed height
footer: false // display/hide footer
},
// column sorting
sortable: true,
pagination: true,
// columns definition
columns: [{
field: "RecordID",
title: "#",
sortable: false, // disable sort for this column
width: 40,
textAlign: 'center',
selector: { class: 'm-checkbox--solid m-checkbox--brand' }
}, {
field: "OrderID",
title: "Numara",
// sortable: 'asc', // default sort
filterable: true, // disable or enable filtering
// basic templating support for column rendering,
template: '{{OrderID}} - {{ShipCountry}}'
}, {
field: "ShipName",
title: "Adı"
}, {
field: "Status",
title: "Durumu",
// callback function support for column rendering
template: function (row) {
var status = {
true: { 'title': 'Aktif', 'class': ' m-badge--success' },
false: { 'title': 'Pasif', 'class': ' m-badge--danger' }
};
return '<span class="m-badge ' + status[row.Status].class + ' m-badge--wide">' + status[row.Status].title + '</span>';
}
}, {
field: "Actions",
title: "İşlem",
width: 100,
sortable: false,
overflow: 'visible',
template: function (row) {
var tblName = String(row.ShipName).replace(/'/g, "\\'");
var tblid = String(row.RecordID);
return '\
<a href="#" onclick="Modalac('+ tblid + ',\'' + tblName + '\',' + row.Status + ')" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Düzenle">\
<i class="la la-edit"></i>\
</a>\
<a href="#" onclick="Sil('+ tblid + ',\'' + tblName + '\')" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Sil">\
<i class="la la-trash"></i>\
</a>\
';
}
}]
});
var query = datatable.getDataSourceQuery();
$('#m_form_search').on('keyup', function (e) {
// shortcode to datatable.getDataSourceParam('query');
var query = datatable.getDataSourceQuery();
query.generalSearch = $(this).val().toLowerCase();
// shortcode to datatable.setDataSourceParam('query', query);
datatable.setDataSourceQuery(query);
datatable.load();
}).val(query.generalSearch);
$('#m_form_status').on('change', function () {
// shortcode to datatable.getDataSourceParam('query');
var query = datatable.getDataSourceQuery();
query.Status = $(this).val().toLowerCase();
// shortcode to datatable.setDataSourceParam('query', query);
datatable.setDataSourceQuery(query);
datatable.load();
}).val(typeof query.Status !== 'undefined' ? query.Status : '');
$('#m_form_status').selectpicker();
// on checkbox checked event
$('.m_datatable').on('m-datatable--on-check', function (e, args) {
var count = datatable.setSelectedRecords().getSelectedRecords().length;
$('#m_datatable_selected_number').html(count);
if (count > 0) {
$('#m_datatable_group_action_form').collapse('show');
}
})
.on('m-datatable--on-uncheck m-datatable--on-layout-updated', function (e, args) {
var count = datatable.setSelectedRecords().getSelectedRecords().length;
$('#m_datatable_selected_number').html(count);
if (count === 0) {
$('#m_datatable_group_action_form').collapse('hide');
}
});
$('.m_datatable tbody').on('click', 'tr', function (){
var id = this.RecordID;
var index = $.inArray(id, selected);
if (index === -1)
{
selected.push(id);
} else
{
selected.splice(index, 1);
}
$(this).toggleClass('selected');
});
});
};
return {
// public functions
init: function () {
demo();
}
};
}();
var TopluIslem = function () {
var datatable = $('.m_datatable').mDatatable();
var dataArr = [];
$.each($(".m_datatable tr.selected"),function(){
dataArr.push($(this).find('td').eq(0).text());
});
console.log(dataArr);
alert(rowCount);
};
jQuery(document).ready(function () {
DatatableRecordSelectionDemo.init();
}); <a href="#" class="btn btn-sm btn-danger islem_yap" onclick="TopluIslem()">İşlem Yap</a>
mDatatable...?