Develop Reference

Show Check box in every row using JavaScript data table

Using the JavaScript datable get the data with pagination but i have to show checkbox on header and each row. once select the check box get the id of particular row or if select header checkbox get all rows id on server side.
Table :
<table id="tblSavingColl" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr style="background-color: Mediumseagreen">
<th>#Html.CheckBox("CheckAll") </th>
<th>Shop</th>
<th>Client ID</th>
<th>Sales Month</th>
<th>Control</th>
<th>Entry</th>
<th>TMS</th>
<th>Informed</th>
<th>Posted</th>
</tr>
</thead>
<tbody id="tblData">
</tbody>
</table>
Javascript:
$("#btnList").click(function () {
var Buildingid = $("#BuildingId").val();
var shopid = $("#ShopId").val();
var Post = $("#SelectedValue").val();
$("#tblSavingColl").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/Archive/GetArchiveList",
"type": "POST",
data: { buildingid: Buildingid, shopid: shopid, Post: Post },
"datatype": "json"
},
"columnDefs": [{
'targets': 0,
'checkboxes': {
'selectRow': true
}
//"targets": [0],
//"visible": false,
//"searchable": false,
//'render': function (data, type, full, meta) {
// return '<input type="checkbox" name="id[]" value="'
// + $('<div/>').text(data).html() + '">';
//}
}],
" select": {
'style': 'multi'
},
"order": [[1, 'asc']],
"columns": [
{"data": "id","defaultContent": '',"className": 'select-checkbox',"orderable": true},
{ "data": "shopName", "name": "ShopName", "autoWidth": true },
{ "data": "clientID", "name": "clientID", "autoWidth": true },
{ "data": "salesMonth", "name": "salesMonth", "autoWidth": true },
{ "data": "controlTotal", "name": "controlTotal", "autoWidth": true },
{ "data": "totalAmount", "name": "totalAmount", "autoWidth": true },
{ "data": "tms", "name": "tms", "autoWidth": true },
{ "data": "informed", "name": "informed", "autoWidth": true },
{ "data": "posted", "name": "posted", "autoWidth": true },
//{
// "render": function (data, type, full, meta) { return '<a class="btn btn-info" href="/DemoGrid/Edit/' + full.CustomerID + '">Edit</a>'; }
//},
//{
// data: null,
// render: function (data, type, row) {
// return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.CustomerID + "'); >Delete</a>";
// }
//},
]
});
});
I have used this javascript url and also tried to use data table
JS url:
<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>

Datatable doesn't load JSON data, shows message "No data available in table"

I'm using Datatables.net to display data on my Shopify site. As an example, I just set the JSON data to have 1 key value pair of "itemcode" and then the actual product's item code. Here is an example of my data:
JSON Data
{
"jsonData": [
{
"itemcode": "0735340080 - Bearings"
},
{
"itemcode": "BL208-Z - Bearings"
},
{
"itemcode": "9109K - Bearings"
},
{
"itemcode": "735330016 - Bearings"
},
{
"itemcode": "699-ZZ - Bearings"
},
{
"itemcode": "698-ZZ - Bearings"
},
{
"itemcode": "697-ZZ - Bearings"
}
]
}
I'm using this code to load the data in. To clarify, the JSON is loaded from a hidden div element on the page:
Javascript Code
$(document).ready(function () {
var jsonDataDiv = document.getElementById("json-data").innerText;
var jsonData = JSON.parse(jsonDataDiv);
var table = $('#tableAppend').DataTable({
orderCellsTop: true,
pageLength: 25,
data: jsonData,
"columns": [{jsonData: "itemcode"}],
columnDefs: [
{"className": "dt-center", "targets": "_all"}
],
});
});
No errors are reported in the debug window, but my table states that no data was available. My HTML code is here:
HTML Code
<table class="display" id="tableAppend" style="margin-left: 20px;margin-right: 20px;">
<thead>
<tr>
<th class="dt-center">Item Code</th>
</tr>
</thead>
</table>
I've been following Q&A's online, but they don't seem to relate to my problem.

The issue is in the initialization of the table
Check out https://codepen.io/mvinayakam/pen/abzpJar
$(document).ready(function () {
var jsonDataDiv = document.getElementById("json-data").innerText;
var jsonData = JSON.parse(jsonDataDiv);
var table = $('#tableAppend').DataTable({
orderCellsTop: true,
pageLength: 25,
data: jsonData,
"columns": [{data: "itemcode"}],
columnDefs: [
{"className": "dt-center", "targets": "_all"}
],
});
})
As an aside, I am assuming the json is in the div only for trial purposes.

You have to only change the data table column assign parameter name jsonData --> data
"columns": [{data: "itemcode"}],

Disable row selection in first column DataTables

I have a simple datable https://jsfiddle.net/ptwgxpzu/27/
JS:
var dataSet = [
["data/rennes/", "Rennes", "rennes.map"],
["data/nantes/", "Nantes", "nantes.map"],
["data/tours/", "Tours", "tours.map"],
["data/bordeaux/", "Bordeaux", "bordeaux.map"],
["data/limoges/", "Limoges", "limoges.map"],
["data/troyes/", "Troyes", "troyes.map"]
];
var table = $('#maptable').DataTable({
"data": dataSet,
"paging": false,
"columns": [{
title: "Download"
}, {
title: "Name"
}, {
title: "File Name"
}],
"columnDefs": [{
"targets": [0], // Download
"visible": true,
"searchable": false,
"bSortable": false
}, {
"targets": [1], // Name
"visible": true,
"searchable": true
}, {
"targets": [2], // File name
"visible": true,
"searchable": true
},
],
"order": [
[1, "asc"]
],
"oLanguage": {
"sSearch": ""
},
"aoColumns": [{
"title": ' <i class="fa fa-cloud-download white"></i> Download',
"render": function(data, type, full, meta) {
var url = 'http://localhost/';
var mapurl = url + full[0] + full[2],
trackurl = url + full[0] + full[2].replace('map', 'trx');
return '<div class="btn-group">' +
'<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
'<i class="fa fa-cloud-download white"></i> <span class="caret"></span>' +
'</button>' +
'<ul class="dropdown-menu">' +
'<li></i> map file</li>' +
'<li></i> track file</li>' +
'</ul>' +
'</div>';
}
}, {
"title": "Name"
}, {
"title": "File name"
}]
});
$('#maptable tbody').delegate( 'tr', 'click', function () {
$(this).toggleClass('selected');
//...
});
HTML:
<body>
<br />
<div class="container">
<table id="maptable" class="table table-bordered" width="100%"></table>
</div>
</body>
When rows in table not selected and I click on dropdown button in first column - row in table is becoming selectable.
And when row in table selected and I click on dropdown button in first column - row in table is becoming deselected
How avoid action of 'deselected row' when I click on dropdown button when row in table selected and avoid action 'selected row' when I click on dropdown button when rows in in table not selected? Or disable row selection only in first column

Use the following code:
$('#maptable tbody').on('click', 'td:not(:first-child)', function () {
$(this).closest('tr').toggleClass('selected');
//...
});
See updated jsFiddle for code and demonstration.
Alternatively, if you want allow selection in the first column (except when the button is clicked), then use the following code:
$('#maptable tbody').on('click', 'tr', function (e) {
if(!$(e.target).is('button')){
$(this).toggleClass('selected');
}
//...
});
See updated jsFiddle for code and demonstration.

Row selection in DataTables uses the select extension.
$('#yourTableId').DataTable({
select: true
});
If you want full control over which columns allow selection, use select.selector. For this question, ignore selection events when the first column is chosen, use:
$('#yourTableId').DataTable({
select: {
selector:'td:not(:first-child)',
style: 'os'
}
});
Be sure to include an extra empty <th> element when defining your table, e.g.:
<table id="yourTableId" class="display">
<thead>
<tr>
<th></th>
#foreach(string column in Model.columns) {
<th>#column</th>
}
</tr>
</thead>
<tfoot>
<tr>
<th></th>
#foreach(string column in Model.columns) {
<th>#column</th>
}
</tr>
</tfoot>
</table>
Here I use Microsoft Razor (the #foreach)for brevity, but regardless of your platform, notice the <th></th> just after the <tr>.

JQuery DataTable add attribute to customize button

I'm trying to build JQuery DataTable with customize buttons. This is my code:
<table id="myDataTable" class="display" width="100%">
<thead>
<tr>
<th> </th>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function () {
$('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "Home/GetDataTable",
"bProcessing": true,
"aoColumns": [
{"data": "ID"},
{ "data": "Name" },
{ "data": "Address" },
{ "mData": "Town" },
{
bSortable: false,
data: null,
className: "center",
defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>'
}
],
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
},
]
});
});
</script>
And this is my Action in the Controller:
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = result.Count(),
iTotalDisplayRecords = result.Count(),
aaData = result
},
JsonRequestBehavior.AllowGet);
}
This code works fine but now I want to add data-id attributes to my buttons. I wanna to set value of ID field (which I hided) to data-id attribute for each row. How I can implement it?

<script>
$(document).ready(function () {
$('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "Home/GetDataTable",
"bProcessing": true,
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// if your button is in 5th column then index will be 4 because it starts from 1
$('td:eq(4)', nRow).find( 'button' ).attr('id',aData[0]);
//assuming your id is in the 1st element of data
},
"aoColumns": [
{"data": "ID"},
{ "data": "Name" },
{ "data": "Address" },
{ "mData": "Town" },
{
bSortable: false,
data: null,
className: "center",
defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>'
}
],
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
},
]
});
});
</script>

hi could u please test this code :
{
bSortable: false,
data: null,
render: function(d) {
return "<button class="btn btn-danger data-id="'+ d.YourModelID +'" ">edit</button> <button class="btn btn-primary">delete</button>";
},
className: "center",
}
instead of this :
{
bSortable: false,
data: null,
className: "center",
defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>'
}

DataTables Cannot read property 'length' of undefined

Below is the document ready function
Script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "GetUser.ashx",
"sServerMethod": "POST",
"sAjaxDataProp" : "",
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"mData": "download_link",
"mRender": function ( data, type, full ) {
return 'Detail';
}
} ],
"aoColumns": [
{ "mData": "LoginId" },
{ "mData": "Name" },
{ "mData": "CreatedDate" }
]
});
Below is the respond from server (GetUser.ashx)
[
{
"UserId": "1",
"LoginId": "white.smith",
"Activated": "Y",
"Name": "Test Account",
"LastName": "Liu",
"Email": "white.smith#logical.com",
"CreatedDate": "1/21/2014 12:03:00 PM",
"EntityState": "2",
"EntityKey": "System.Data.EntityKey"
},
More Data...
]
Below is the html table where the data should be put
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="15%">User Detail</th>
<th width="15%">LoginID</th>
<th width="15%">Name</th>
<th width="15%">Created Date</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th width="15%">User Detail</th>
<th width="15%">LoginID</th>
<th width="15%">Name</th>
<th width="15%">Created Date</th>
</tr>
</tfoot>
</table>
Expected result:
But I came across a problem:
While the page is loading, there was an uncaught exception from the browser:
Cannot read property 'length' of undefined
When I further check, it came from line 2037 of jquery.dataTables.js
var aData = _fnGetObjectDataFn( oSettings.sAjaxDataProp )( json );
I checked that the json was valid, but the "aData" was null, why this happen?

Your "sAjaxDataProp" : "" is set to an empty string, which causes this error.
dataTables expects to have a string here to tell under which key your server returned data can be found.
This defaults to aaData, so your json should include this key amongst all others that might be returned or needed by pagination etc.
Normal serversided json:
{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"aaData": [
[
"1",
"sameek",
"sam",
"sam",
"sameek#test.com",
"1",
""
],...
Since all values are in aaData you don't need sAjaxDataProp at all.
Modified serverside json:
{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"myData": [
[
"1",
"sameek",
"sam",
"sam",
"sameek#test.com",
"1",
""
],
Now the values are in myData. so you need to tell dataTables where to find the actual data by setting:
"sAjaxDataProp" : "myData"
Here is a Plunker

As there are 4 columns, add the following in "aoColumns":
"aoColumns": [
{ "mData": null }, // for User Detail
{ "mData": "LoginId" },
{ "mData": "Name" },
{ "mData": "CreatedDate" }
]
For undefined length, I have tried the following code and it's working:
$('#example').dataTable({
"aLengthMenu": [[100, 200, 300], [100, 200, 300]],
"iDisplayLength": 100,
"iDisplayStart" : 0,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "GetUser.ashx",
"sServerMethod": "POST",
"sAjaxDataProp" : "",
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"mData": "download_link",
"mRender": function ( data, type, full ) {
return 'Detail';
}
} ],
"aoColumns": [
{ "mData": null },
{ "mData": "LoginId" },
{ "mData": "Name" },
{ "mData": "CreatedDate" }
]
});
The reference site to know more about aLengthMenu is:
https://legacy.datatables.net/ref#aLengthMenu

If you see this error, look at the json returned from the server, and then make sure that all of your datatable 'mData' values have matching entry. If you are also using a bean, check there as well.
And there is no need specify 'tr', 'td', etc for the table. It is much cleaner if you let jquery do that for you. Here is what my tables look like:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="myTable" style="table-layout:fixed" ></table>
and then my datatable elements specify the width and column title:
{sTitle: "Column A", sWidth: "100px", mData: "idStringFromJson", bSortable: false},

Use $('#example').DataTable({.. (capital D) instead of $('#example').dataTable({..

When I ran into this problem, it was actually the result of an un-applied migration. I had restored a backup of the database, which hadn't yet had one of my recent schema migrations run on it, and once I ran migrations, everything worked fine.