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>

Show an image in a "Jquery Datatable Plugin" cell using "columns.render" callback

I'm trying to display an image in a cell using the suggested answer from this post: Displaying image on Datatable.
However, the first parameter of the callback (data) should receive the string with the url pointing to the image, but it is always undefined.
This is how I initialize the datatable (columnDefs contains the callback I was talking about):
$().ready(function () {
var opt = {
columnDefs: [{
"targets": 2,
"data": 'teamLogo',
"render": function (data, type, row, meta) {
return '<img src="' + data + '" alt="' + data + '"height="16" width="16"/>';
}
}],
info: false,
order: [[0, 'asc']],
paging: false,
responsive: true,
searching: false
};
$('#dataTable').DataTable(opt);
});
After an ajax call, I update data into the table, drawing it back again:
$('#cmbSeasons').change(function () {
var leagueId = parseInt($('#cmbLeagues').val().toString());
var seasonYear = parseInt($('#cmbSeasons').val().toString());
var settings = {
url: '/Standing/Read/Standings',
type: 'GET',
contentType: 'application/json; charset=utf-8',
dataType: "json",
data: { leagueId: leagueId, seasonYear: seasonYear },
success: function (data) {
var t = $('#dataTable').DataTable();
t.clear();
for (var i = 0; i < data.length; i++) {
t.row.add([
data[i].rank,
data[i].teamName,
data[i].teamLogo,
data[i].points,
data[i].allPlayed,
data[i].allWin,
data[i].allDraw,
data[i].allLose,
data[i].allGoalsFor,
data[i].allGoalsAgainst,
data[i].homePlayed,
data[i].homeWin,
data[i].homeDraw,
data[i].homeLose,
data[i].homeGoalsFor,
data[i].homeGoalsAgainst,
data[i].awayPlayed,
data[i].awayWin,
data[i].awayDraw,
data[i].awayLose,
data[i].awayGoalsFor,
data[i].awayGoalsAgainst
]);
}
t.draw();
},
error: function (result) { alert('error ' + result.status + ': ' + result.responseText); }
};
$.ajax(settings);
});
The third column (data[i].teamLogo) contains the correct url I want to use as src for the image (I'm sure about it because I used the developer console to check the correctness of the string).
This is html Markup:
<table id="dataTable" class="text-center">
<thead class="text-capitalize">
<tr>
<th class="all">Rank</th>
<th class="all">Team</th>
<th class="all">Logo</th>
<th class="all">Pts</th>
<th class="all">Pl</th>
<th class="all">W</th>
<th class="all">D</th>
<th class="all">L</th>
<th class="all">GF</th>
<th class="all">GA</th>
<th class="all">HPl</th>
<th class="all">HW</th>
<th class="all">HD</th>
<th class="all">HL</th>
<th class="all">HGF</th>
<th class="all">HGA</th>
<th class="all">APl</th>
<th class="all">AW</th>
<th class="all">AD</th>
<th class="all">AL</th>
<th class="all">AGF</th>
<th class="all">AGA</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Is there anything wrong with the callback I wrote? Should be "data" parameter populated with a different string, instead of 'teamLogo'?
I'm using the latest version of datatables (1.10.20) and Jquery (3.5.1).

return '<img src="' + data + '" alt="' + data + '"height="16" width="16"/>';
use an Img object to return instead
https://www.w3schools.com/jsref/dom_obj_image.asp

Changing the definition of the options this way:
$().ready(function () {
let opt: DataTables.Settings = {
columns: [
{ "data": "rank" },
{ "data": "teamName" },
{ "data": "teamLogo" },
{ "data": "points" },
{ "data": "allPlayed" },
{ "data": "allWin" },
{ "data": "allDraw" },
{ "data": "allLose" },
{ "data": "allGoalsFor" },
{ "data": "allGoalsAgainst" },
{ "data": "homePlayed" },
{ "data": "homeWin" },
{ "data": "homeDraw" },
{ "data": "homeLose" },
{ "data": "homeGoalsFor" },
{ "data": "homeGoalsAgainst" },
{ "data": "awayPlayed" },
{ "data": "awayWin" },
{ "data": "awayDraw" },
{ "data": "awayLose" },
{ "data": "awayGoalsFor" },
{ "data": "awayGoalsAgainst" }
],
columnDefs:
[{
"targets": 2,
"data": 'teamLogo',
"render": function (data, type, row, meta) {
return '<img src="' + data + '" alt="' + data + '"height="16" width="16"/>';
}
}],
info: false,
order: [[0, 'asc']],
paging: false,
responsive: true,
searching: false
}
$('#dataTable').DataTable(opt);
});
and simplifying the for loop like this:
t.rows.add( data ).draw();
did the trick!
It seemes that I had to define the data columns for the callback to work properly.

Copy Row Table into 'New Table'. | jQuery

I have created a dataTable copy row.
mainTable can only copy to the secondTable.
The problem is when adding New Table,
&
i want the mainTable row can copy into New Table.
i already create "Create New Table" button
New table will append into parent div allTable
MY JSFiddle.
Reference :
I want copy row into selected table(secondTable/newTable). not multiple. and I dont know how to add the selected button, because I'm using a variable.
I have parent div class="allTable" for Table/children (mainTable,
secondTable, and New Table).
i have "COPY ROW" for copy row table from mainTable to another Table, but now only work to copy into the secondTable.
In the $(document).ready(function()),
I have created dataTable for mainTable and secondTable.
mainTable ID is #table1
secondTable ID is #table2
New Table ID is #newTable + index (newTable(3) )
New Table will display blank data.
SCREENSHOT :
I really hope for your help.

This works, but you can improve it, I hope you can get the idea from here, this is not fully working as intended but the flow might help you.
https://jsfiddle.net/o6ysgzps/26/ I have updated the fiddle,
as you can see, I collected the list of tables that are created, and looped to each tables with a confirmation box to select which table you want it to be copied to., You can use bootstrap modal and jquery confirm to make it better,
You can make it cleaner,
html
<body>
<select id='cboList' style=''></select>
<div class="allTable">
<div class="one" style="padding-bottom:50px">
<h2>TABLE 1</h2>
<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>
<br>
<button id="Copy">COPY ROW »</button>
<!-- <button id="LeftMove" style="float:left;">« left</button> -->
<br>
<h2>TABLE 2</h2>
<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>
<br>
<br>
<br>
<input type="button" class="submitButton" value="Create New Table">
<h2>NEW TABLE GOES HERE</h2>
</div>
</body>
This is the js
$(document).ready(function() {
var mainTable = $('#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
},
"render": function(data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
"scrollY": "200px",
}); // mainTable
var secondTable = $('#table2').dataTable({
"columns": [{
"data": "id"
}, {
"data": "name"
}, {
"data": "subtype"
}, {
"data": "approximate_count"
}, {
"data": "time_created"
}],
"columnDefs": [{
"targets": 0,
"checkboxes": {
"selectRow": true
},
"render": function(data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
"scrollY": "200px",
"scrollCollapse": "true"
}); // secondTable
mainTable.on('click', 'tbody tr', function() {
$(this).toggleClass('selected');
});
$('#Copy').on('click', function() {
var tables = $(".allTable").find("table*[id]").not("#table1");
tables.each(function(){
console.log(this.id);
var tbl_id = this.id;
var $elem = $(this);
var r = confirm("Copy to table "+tbl_id+"?");
var table_to_copy = $elem.dataTable();
if (r == true) {
copyRows(mainTable, table_to_copy);
alert("Copied!");
} else {
}
});
//
});
}); // end of $(document).ready...
function copyRows(fromTable, toTable) {
var $row = fromTable.find(".selected");
$.each($row, function(k, v) {
if (this !== null) {
addRow = fromTable.fnGetData(this);
toTable.fnAddData(addRow); // <-- Copy Row
// fromTable.fnDeleteRow(this); <-- Move row, delete main row.
}
});
}
var tableIndex = 3;
$('.submitButton').click(function() {
let addIndex = tableIndex++;
var addTable = '<div class="newTable'+ addIndex +'">' +
'<table id="newTable'+ addIndex +'" 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>';
$('.allTable').append(addTable);
var newTable = $("#newTable"+ addIndex).dataTable({
"columns": [{
"data": "id"
}, {
"data": "name"
}, {
"data": "subtype"
}, {
"data": "approximate_count"
}, {
"data": "time_created"
}],
"columnDefs": [{
"targets": 0,
"checkboxes": {
"selectRow": true
},
"render": function(data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
"scrollY": "200px",
"scrollCollapse": "true"
}); // newTable
});

modify your code as follow:
function copyRows(fromTable, toTable) {
var toTable = $("table:last").dataTable(); // add this line to the function. Then you can remove toTable from parameters

Datatable return [Object Object] on index column

I'm using datatable to show data from controller (i'm using Codeigniter) and need to show number column on the left table column.
I have tried:
$(document).ready(function() {
$('#booking_table').dataTable( {
processing: true,
serverSide: true,
language: dt_lang,
pagingType: "simple",
dom: 't<"col-sm-3 text-left"l><"col-sm-3"i><"col-sm-2"r><"col-sm-4 text-right"p>',
autoWidth : true,
ajax: {
"url" : base_url+"book/ajax_history",
"type" : "POST",
data : function (d){
d.show_filter = $('#_show_filter').val();
d.view_type = $('#_view_type').val();
}
},
columns: [
{
data : "b.booking_id",
visible : false,
},
{ data : null}, //where i should put index number
{ data : 'b.booking_date', className : "hidden-xs"},
{ data : 'b.from_name', className : "hidden-xs"},
{ data : 'b.to_name'},
],
responsive: false
});
// reference the table in a variable
var table = $('#booking_table').DataTable();
table.on( 'order.dt search.dt', function () {
table.column(0, {
search:'applied',
order:'applied'
}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
My Table:
<table class="table table-condensed" id="booking_table">
<thead>
<tr>
<th class="hidden-xs">id</th>
<th>No</th>
<th class="hidden-xs">
Tanggal
</th>
<th class="hidden-xs">
Pengirim
</th>
<th>
Penerima
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Refer to this https://www.datatables.net/examples/api/counter_columns.html
but, it's not working. What am I doing wrong ?

Please try below mentioned solution. Hope this will help you. Actually you initialized datatable two times.
$(document).ready(function() {
var table = $('#booking_table').dataTable({
processing: true,
serverSide: true,
language: dt_lang,
pagingType: "simple",
dom: 't<"col-sm-3 text-left"l><"col-sm-3"i><"col-sm-2"r><"col-sm-4 text-right"p>',
autoWidth: true,
ajax: {
"url": base_url + "book/ajax_history",
"type": "POST",
data: function(d) {
d.show_filter = $('#_show_filter').val();
d.view_type = $('#_view_type').val();
}
},
columns: [{
data: "b.booking_id",
visible: false,
},
{
data: null
}, //where i should put index number
{
data: 'b.booking_date',
className: "hidden-xs"
},
{
data: 'b.from_name',
className: "hidden-xs"
},
{
data: 'b.to_name'
},
],
responsive: false
});
table.on('order.dt search.dt', function() {
table.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});

How to empty and refill jquery datatable?

I have a jquery datatable on my page. This datatable is gonna show data based on a request made to my api
The HTML that I have is like the following:
<table id="details" class="table table-bordered table-hover table-striped nowrap hidden display" cellspacing="0" width="100%">
<thead>
<tr>
<th> </th>
<th>Patient Full Name</th>
<th class="hidden">LF</th>
</tr>
</thead>
<tfoot>
<tr>
<th> </th>
<th>Patient Full Name</th>
<th class="hidden">LF</th>
</tr>
</tfoot>
<tbody>
<tr id="dummytr2"><td style="text-align:center;padding-top:20px;" colspan="7"><p><em>No Data Available</em></p></td></tr>
</tbody>
</table>
The first <th> is gonna be used to collapse the tr and get the facility (the third <th> or the hidden one) of this patient.
I have a dummy <tr> in the table because I don't want to initialize the datatable at the beginning so I don't get the error message that tells me that I can't initialize my datatable twice.
The request to my api is gonna be triggered through a bunch of buttons like the following:
$.ajax({
url: "https://" + window.myLocalVar + "/api/metrics/GetDetails?metricName=" + metric,
type: "GET",
dataType: 'json',
contentType: 'application/json',
success: function (requests) {
if (requests.length > 0) {
$("#dummytr2").remove();
for (var i = 0; i < requests.length; i++) {
var patient_name = requests[i].PatientFullName;
var lab_facility = requests[i].LabFacility;
tr = '<tr>\
<td class=" details-control"></td>\
<td>' + patient_name + '</td>\
<td class="hidden">' + lab_facility + '</td>\
</tr>';
$("#details > tbody").append(tr);
//click event for each tr
$('#details tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
}
}
// NOT SURE WHY IT IS NOT WORKING
$('#details').dataTable().fnDestroy();
var table = $('#details').DataTable({
"scrollX": true,
stateSave: true,
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "PatientFullName" },
{ "data": "LabFacility" }
],
"order": [[1, 'asc']]
});
},
error: function (err) {
if (err) {
console.log(err);
}
}
});
});
function format(d) {
// `d` is the original data object for the row
var lf = d.LabFacility;
if (lf == "") {
lf = "No Lab Facility"
}
// wrapping text is not working???
return '<div class="table-responsive"><table class="table display" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Lab Facility:</td>' +
'<td>' + lf + '</td>' +
'</tr>' +
'</table></div>';
}
This ajax request is gonna get called each time a button is clicked. This means the content of my datatable is going to change each time a button was clicked. I tried to clear and refill it did not work.. I tried to destroy it .. it did not work.. each time I destroy my datatable and execute the script it won't change the content of the table.
I am not sure what's wrong with my code. My code works only for the first time.. the second time you click a button, it won't update my datatable.
Thanks!

You need to:
empty the table with empty()
remove $('#details').dataTable().fnDestroy();
add destroy: true option
For example:
if (requests.length > 0) {
// Empty table
$('#details').empty();
// ... skipped ...
var table = $('#details').DataTable({
destroy: true,
// ... skipped ...
});
// ... skipped ...
}

Please see sample of what I was saying in comments above:
var dataTable_ = null;
var init_ = false;
var initDataTable = function() {
dataTable_ = $('#table').DataTable({
preDrawCallback: function(settings) {
},
drawCallback: function(settings) {
if (init_ === false) {
init_ = true;
}
},
searching: true,
data: [],
fnCreatedRow: function(nRow, aData, iDataIndex) {
},
scrollY: true,
scrollX: true,
responsive: false,
serverSide: false,
autoWidth: false,
processing: false,
scrollCollapse: false,
lengthChange: false,
fixedColumns: false,
info: false,
select: {
info: false,
items: 'rows'
},
dom: '<"toolbar">Bfrtip',
orderMulti: false,
stripeClasses: ['dt-stripe-1', 'dt-stripe-2'],
columns: [{
name: 'test1',
data: 'test1',
title: 'Test1',
type: 'string',
orderable: true
},
{
name: 'test2',
data: 'test2',
title: 'Test2',
type: 'string',
orderable: true
},
]
});
};
var ajaxFunction = function() {
$.ajax({
url: "https://api.myjson.com/bins/7ed89",
type: "GET",
dataType: 'json',
contentType: 'application/json',
success: function(data) {
if (init_ === false) {
initDataTable();
}
if (typeof dataTable_ == 'object') {
dataTable_.rows().remove().draw();
dataTable_.rows.add(data);
dataTable_.draw();
}
//console.log(data);
}
});
};
$('#button').click(function() {
ajaxFunction();
});
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="table" class="cell-border hover call-list">
</table>
<button id="button">Click To Load Data</button>