Develop Reference

How to get all checkbox values in cells

I have jQuery datatables with some checkboxes for granting privileges.
I need to get table values to a array. Please enlighten me about how to get checkbox states inside cells, not only the checked ones. Thank you.
My table
<table id="jqueryTable" name="tt" class="table table-striped table-bordered" cellspacing="0">
<thead>
<tr>
<th name="id">
ID
</th>
<th name="name">
PRIV_Name_Str
</th>
<th name="create">
Create
</th>
<th>
Edit
</th>
<th>
View
</th>
</tr>
</thead>
<table>
My datatable query
function LoadProduct(element) {
$.ajax({
url: '/ADM_MAS_Privilege/GetFormData',
data: { YourValue: $('#productCategory').val() },
method: 'post',
dataType: 'json',
success: function (data) {
var table = $('#jqueryTable').dataTable({
paging: true,
sort: true,
searching: true,
scrollY: 200,
data: data,
bDestroy: true,
"columnDefs":
[{
"targets": [2, 3, 4],
"render": function (data, type, row, meta) {
console.log("XX " + meta.row + " " + meta.col);
return type === 'display' ?
'<input type="checkbox" id="p" class="chk" name="group' + meta.row + '" /> ' + data :
data;
columns: [{ "data": "ID", "ID": "ID", "autoWidth": true },
{
"data": "PRIV_Name_Str", "PRIV_Name_Str": "PRIV_Name_Str", "autoWidth": true
},
{
"data": "Create", "Create": "Create", "autoWidth": true
},
{ "data": "Edit", "Edit": "Edit", "autoWidth": true },
{
"data": "View"
}
]
});
}
});
};
My jQuery function to read datatable
$('#upload').click(function () {
var table = document.getElementById("jqueryTable");
var tableArr = [];
for (var i = 1; i < table.rows.length; i++) {
tableArr.push({
ID: table.rows[i].cells[0].innerHTML,
PRIV_Name_Str: table.rows[i].cells[1].innerHTML,
Create: table.rows[i].cells[2].innerHTML,
Edit: table.rows[i].cells[3].innerHTML,
View: table.rows[i].cells[4].innerHTML
});
}
});
I tried table.rows[i].cells[2].innerHTML.getElementById("p").checked even and it's not working.

Since you are using jQuery:
document.getElementById("jqueryTable").each(function (index, element) {
tableArr.push({
ID: element.cells[0].innerHTML,
PRIV_Name_Str: element.cells[1].innerHTML,
Create: element.cells[2].innerHTML,
Edit: element.cells[3].innerHTML,
View: element.cells[4].innerHTML
})
})

You can find the element and the checked property within each cell:
for (var i = 1; i < table.rows.length; i++) {
var cells = table.rows[i].cells;
tableArr.push({
ID: cells[0].innerHTML,
PRIV_Name_Str: cells[1].innerHTML,
Create: cells[2].querySelectorAll('input')[0].checked,
Edit: cells[3].querySelectorAll('input')[0].checked,
View: cells[4].querySelectorAll('input')[0].checked
});
}

How to add buttons to each row of a datatable?

$(document).ready(function() {
var table = $('#example').DataTable({
"columns": [
{ "data": "id" },
{ "data": "itemID" },
{ "data": "imagePath" },
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "icon" },
{ "data": "reporter" },
{ "data": "title" },
{ "data": "dateUploaded" },
{ "data": "dateReported" },
{ "data": "reportedReason" },
{ "data": "description" },
{ "data": "problem" },
{ "data": "numReports" },
{ "data": "deleteImage" }
],
"columnDefs":
[
{
"targets": 0,
"visible": false
},
{
"targets": 1,
"visible": false
},
{
"targets": 2,
"visible": false
},
{
"data": null,
"defaultContent": "<button>Delete</button>",
"targets": -1
}
]
});
]);
Note: The final td in the tbody has been left blank.
<table id="example" class="sortable table table-bordered table-striped table-hover">
<thead>
<?php
foreach($report_flag_info as $flag_info){
?>
<tr>
<th>ID</th>
<th>ItemID</th>
<th>Image Path</th>
<th>Image</th>
<th>Reporter</th>
<th>Title</th>
<th>Image</th>
<th>Uploaded</th>
<th>Reported</th>
<th>Reason</th>
<th>Description</th>
<th>Problem</th>
<th>No. Times Reported</th>
<th>Delete Image</th> // I want the button to be in this column
</tr>
</thead>
<tbody>
<?php
foreach($report as $flag_info){
?>
<tr>
<td></td>...
</tr>
<?php } ?>
</tbody>
</table>
The table in the html is populated by using a foreach loop to load the data from the server to the table. I tried the suggestion in the following links to
solve the issue.
https://datatables.net/reference/option/columns.defaultContent
How do I add button on each row in datatable?
https://datatables.net/examples/ajax/null_data_source.html
How add more then one button in each row in JQuery datatables and how to apply event on them

The fact that conumDefs Option was applied before columns.data, meant that columns.data Option config { "data": "deleteImage" }
is overwriting the columnDefs option that is building the button. Changing { "data": "deleteImage" } to { "data": null } prevented
the button being overwritten and hence, solved the problem.

error 500 on jquery datatables search

i created a table with jquery datatables. when I want to filter my table with search bar, the browser gives me an alert DataTables warning: table id=grid - Ajax error. For more information about this error, please see http://datatables.net/tn/7.
this is my code :
$("#grid").dataTable({
"processing": true, // control the processing indicator.
"serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
"info": true, // control table information display field
"stateSave": true, //restore table state on page reload,
"searching": true,
"language": {
"url": "/translate/datatables.fa-IR.json"
},
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], // use the first inner array as the page length values and the second inner array as the displayed options
"ajax": {
"url": serviceBase + "/Auth/Admin/SearchOrders2/",
"type": "GET",
'beforeSend': function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + localStorageService.get("authorizationData").token);
}
},
"columns": [
{ "data": "customerContact", "orderable": true },
{ "data": "isDone", "orderable": true },
{
"mRender":
function (data, type, row) {
var xxx = $scope.name1 = $filter("jalaliDateFromNow")(row["createdDate"]);
return "<span>" + $filter("jalaliDateFromNow")(row["orderCreationTime"]); +'</span>';
}, "orderable": true
},
{ "data": "totalPrice", "orderable": true },
{ "data": "count", "orderable": true },
{ "data": "description", "orderable": true },
{
"mRender": function (data, type, row) {
return '<button class="btn btn-sm btn-circle green tooltips" disabled="disabled"><i class="fa fa-check"></i><span>جزئیات</span></button>'
},
"orderable": false
}
],
"order": [[0, "desc"]]
});
which part of my code is wrong?

dataTable not display ajax data

I need your helps guys. to correct what's wrong with the code.
I want to copy the row table on table1 into table2, but the data does not show up when I use ajax json. have to insert manually into html.
JSFiddle
I want to copy the row table on datatable, but the data does not show up when I use ajax json.
Code Snippet Demonstration
// Code goes here
$(document).ready(function() {
var stockTable = $('#table1').dataTable({
"ajax": "https://api.myjson.com/bins/zvujb",
"columns": [{
"data": "id"
}, {
"data": "name"
}, {
"data": "subtype"
}, {
"data": "approximate_count"
}, {
"data": "time_created"
}],
"columnDefs": [{
"targets": 0,
"checkboxes": {
"selectRow": true
},
"searchable": false,
"orderable": false,
"className": 'dt-body-center',
"render": function(data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
"select": {
"style": "multi"
},
"order": [
[4, "desc"]
],
"scrollY": "400px",
"scrollCollapse": true,
}); // first table
var catalogTable = $('#table2').dataTable(); // Second table
stockTable.on('click', 'tbody tr' ,function() {
$(this).toggleClass('selected');
});
catalogTable.on('click', 'tbody tr' ,function() {
$(this).toggleClass('selected');
});
$('#LeftMove').on('click',function () {
moveRows(catalogTable, stockTable);
});
$('#RightMove').on('click',function () {
moveRows(stockTable, catalogTable);
});
});
function moveRows(fromTable, toTable){
var $row= fromTable.find(".selected");
$.each($row, function(k, v){
if(this !== null){
addRow = fromTable.fnGetData(this);
toTable.fnAddData(addRow);
fromTable.fnDeleteRow(this);
}
});
}
/* Styles go here */
#table2_wrapper{
margin-top:50px;
margin-left:50px;
}
#table1_wrapper{
margin-left:50px;
}
table.dataTable tbody tr.selected {
background-color: #b0bed9;
}
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
background-color: #a6b3cd;
}
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.display tbody tr.odd:hover.selected > .sorting_1, table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_1 {
background-color: #a1aec7;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css" rel="stylesheet"/>
<link href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css" rel="stylesheet"/>
<body>
<div class="one" style="padding-bottom:50px">
<table id="table1" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>Audience Name</th>
<th>Type</th>
<th>Size</th>
<th>Date Created</th>
</tr>
</thead>
</table>
</div>
<center>
<button id="RightMove" style="float:left;">right »</button>
<button id="LeftMove" style="float:left;">« left</button>
</center>
<br>
<br>
<div class="two">
<table id="table2" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>Audience Name</th>
<th>Type</th>
<th>Size</th>
<th>Date Created</th>
</tr>
</thead>
</table>
</div>
</body>

Edit your ajax call as follows
ajax: {
"url": "https://api.myjson.com/bins/zvujb",
"type": "GET",
"error": function (e) {
},
"dataSrc": function (d) {
return d
}
},

[Problem Solved] https://jsfiddle.net/4fukuma/o6ysgzps/2/
Change jquery file, using jquery-1.12.4.js
and edit table2 js code == table1
$(document).ready(function() {
var stockTable = $('#table1').dataTable({
"ajax": "https://api.myjson.com/bins/zvujb",
"columns": [{
"data": "id"
}, {
"data": "name"
}, {
"data": "subtype"
}, {
"data": "approximate_count"
}, {
"data": "time_created"
}],
"columnDefs": [{
"targets": 0,
"checkboxes": {
"selectRow": true
},
"searchable": false,
"orderable": false,
"className": 'dt-body-center',
"render": function(data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
"select": {
"style": "multi"
},
"order": [
[4, "desc"]
],
"scrollY": "400px",
"scrollCollapse": true,
}); // first table
var catalogTable = $('#table2').dataTable({
"columns": [{
"data": "id"
}, {
"data": "name"
}, {
"data": "subtype"
}, {
"data": "approximate_count"
}, {
"data": "time_created"
}],
"columnDefs": [{
"targets": 0,
"checkboxes": {
"selectRow": true
},
"searchable": false,
"orderable": false,
"className": 'dt-body-center',
"render": function(data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
"select": {
"style": "multi"
},
"order": [
[4, "desc"]
],
"scrollY": "400px",
"scrollCollapse": true,
}); // Second table
stockTable.on('click', 'tbody tr' ,function() {
$(this).toggleClass('selected');
});
catalogTable.on('click', 'tbody tr' ,function() {
$(this).toggleClass('selected');
});
$('#LeftMove').on('click',function () {
moveRows(catalogTable, stockTable);
});
$('#RightMove').on('click',function () {
moveRows(stockTable, catalogTable);
});
});
function moveRows(fromTable, toTable){
var $row= fromTable.find(".selected");
$.each($row, function(k, v){
if(this !== null){
addRow = fromTable.fnGetData(this);
toTable.fnAddData(addRow);
fromTable.fnDeleteRow(this);
}
});
}

Datatable aoColumnDefs is not working as expected

I am facing an issue with Datatable .
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<c:forEach items="${Details.columns}" var="column">
<th>${column.columnTitle}</th>
</c:forEach>
</tr>
</thead>
<tfoot>
<tr>
<c:forEach items="${Details.columns}" var="column">
<th></th>
</c:forEach>
</tr>
</tfoot>
<tbody>
<c:forEach items="${Details.callList}" var="call">
<tr>
<c:forEach items="${call.attributes}" var="attribute">
<td>${attribute.value}</td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
</table>
$("#example1").dataTable({
'sDom': '"top"i',
//"aoColumnDefs": [{ "bSearchable": true, "aTargets": [1] }],
"bPaginate" : true,
"bLengthChange" : false,
//"bFilter" : true,
"bSearchable": true,
"bSort" : true,
"bInfo" : true,
"bAutoWidth" : false,
"iDisplayLength": 5
//}).columnFilter({"aoColumns": [{ "type": "text" }, { "type": "text" }, null]});
}).columnFilter({"aoColumnDefs": [{ "bSearchable": true, "aTargets": [2] }]});
From the above snippet.. i am trying to remove the filter/search for last column alone.
Here "aoColumns" works as expected - It removes the filter in last column as i coded,
However i am unable to use "aoColumns" . Since the columns in this table is dynamic/configurable, so it is tough for me to change the code everytime.
It would be really grateful if anyone can help me here..
Thanks,

This is how I use Datatables and it works like a charm. I don't do sorting at client-side, I do it at server-side using AJAX, but the configuration for the table should be the same except for "bServerSide=true". Let me know if this solves your problem:
var oTable = $('#tblMainTable').dataTable({
"searching": false,
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem('jobTitlesDataTables', JSON.stringify(oData));
},
"fnStateLoad": function (oSettings) {
return JSON.parse(localStorage.getItem('jobTitlesDataTables'));
},
"pagingType": "full_numbers",
"bLengthChange": false,
"bAutoWidth": false,
"iDisplayLength": 2000,
"bServerSide": true, // server side
"sAjaxSource": BASE_URL + "Job/GetJobTitleMappingDTOs", // AJAX URL
"bProcessing": true,
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
// send data from client-side to server-side
aoData.push({ "name": "IsMapped", "value": $("#bdgIsMapped").data("selected") });
aoData.push({ "name": "IsSearchableOption", "value": $("#bdgIsSearchable").data("selected") });
aoData.push({ "name": "timestamp", "value": new Date().getTime() }); // Added to avoid caching in some IE versions.
oSettings.jqXHR = $.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"cache": false,
"success": function (json) {
// shows records count next to the top title
if (json.iTotalRecords > 0) {
$("#resultsDescription").text(" - " + json.iTotalRecords + " rows.");
}
else {
$("#resultsDescription").text(" - No results.");
}
// shows paginator when necessary
if (json.iTotalRecords > json.iDisplayLength) {
$(".dataTables_paginate").show();
}
else {
$(".dataTables_paginate").hide();
}
$("#isFirstSearch").val("false");
fnCallback(json);
}
});
},
"aoColumnDefs": [
{
sType: "numeric",
mData: "RowNumber",
aTargets: [0],
mRender: function (data, type, full) {
// this is for custom rendering a column just in case you need it
// 'full' is the row's data object, and 'data' is this column's data
return '<span class="RowNumber">' + full.RowNumber + '</span>';
}
},
{
sType: "numeric",
mData: "JobTitleId",
aTargets: [1],
mRender: function (data, type, full) {
// 'full' is the row's data object, and 'data' is this column's data
return '<span class="EditableJobTitleId" data-job-title-id="' + full.JobTitleId + '">' + full.JobTitleId + '</span>';
}
},
{
sType: "string",
mData: "JobTitle",
aTargets: [2]
}
],
"order": [[1, "asc"]]
});