Develop Reference

Cannot reinitialise DataTable when I reload datatables after perform edit page return to list page

On the list page user can edit info by click on Edit button and open details page for edit data.
After edit done return list page. This my source code
My JS listUser.js is embbed in jsp file at the bottom listusers.jsp
<div class="c-body">
<main class="c-main">
<div class="container-fluid">
<div class="fade-in" id="content">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-sm-4">List Users</div>
<div class="col-sm-8 text-right">
<button id="create_user" type="button" class="btn btn-primary">Tạo mới</button>
</div>
</div>
</div>
<div class="card-body">
<table id="userTable" class="table table-striped table-bordered datatable">
<thead>
<tr>
<th>Username</th>
<th>Full Name</th>
<th>Site</th>
<th>Roles</th>
<th>Areas</th>
<th>Team</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="${contextPath}/user/listUser.js"></script>
</div>
</div>
</main>
</div>
listUser.js
$( document ).ready(function() {
var userTable = $('#userTable').DataTable( {
"processing": true,
"serverSide": true,
"pageLength": 10,
"ajax": {
"url": "/user/paginated",
"data": function ( data ) {
}},
"columns": [
{ "data": "username", "name" : "Username", "title" : "Username", "defaultContent" : ""},
{ "data": "full_name", "name" : "Full Name" , "title" : "Full Name", "defaultContent" : ""},
{ "data": "site_code", "name" : "Site" , "title" : "Site", "defaultContent" : ""},
{ "data": "user_roles", "name" : "Roles", "title" : "Roles", "defaultContent" : ""},
{ "data": "user_areas", "name" : "Areas", "title" : "Areas", "defaultContent" : ""},
{ "data": "team_code", "name" : "Team", "title" : "Team", "defaultContent" : ""},
{ "data": "status", "name" : "Status", "title" : "Status", "defaultContent" : ""},
{ "targets": "no-sort", "orderable": false, "data": "null", "name" : "Thao tác", "title" : "Thao tác", "defaultContent" : "<button id='updateUser' name='updateUser' class='btn btn-primary btn-edit' type='button' aria-pressed='true'>Sửa</button>"}
]
});
$('#userTable').on('click', '.btn-edit', function(){
var data = userTable.row( $(this).parents('tr') ).data();
//alert(data.user_id);
let url = "user/updateUser?id=" + data.user_id;
$("#content").load(url);
});
$(document).on('click', '#update_user', function(){
updateUser();
});
function updateUser() {
...
var data = {
...
};
var json = JSON.stringify(data);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
if(myObj.status == "1"){
$("#content").load("user/list");
}
}
};
xhr.open("POST", "/user/update");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.send(json);
}
});
The problem I occurred DataTables warning: table id=userTable - Cannot reinitialise DataTable.
Thanks you.

From DataTable Docs (first result in search engine with the warning message you provided):
DataTables has a wide range of configuration options which can be used to customise the table at initialisation time, but only at initialisation time. After a DataTable has been initialised any attempt to use these options will result in an error.
Simply put, DataTables does not allow initialisation options to be altered at any time other than at initialisation time. Any manipulation of the table after initialisation must be done through the API [...]
You are not showing how you initialize DataTable, so I can't help you further, unless you update your answer with more information.
Edit
After gathering more info from you, I now can understand what you are trying to do.
Essentially: DataTables expects it's DOM elements to be managed by itself. Once you initialize a DataTable, you should not manipulate any DOM related to it. If you want to show something like the user editing page and go back to the table after save, you need to choose one of the next 2 options:
Completely unmount the DataTable before showing the user edit page and re-initialize it after saving user data and gathering new DataTable data from server.
Don't detach DataTable DOM: show user form in a modal, or hide the DataTable instead of removing it, and unhide it again after user data has been saved. Updated data will need to be reinjected into a living DataTables, which I think will need the use of the .ajax.data initialization option.
Depends on how much data is being transferred and processed I'd choose one or the other.

How to generate a table dynamically and group rows

I want to generate data in data table based on JSON response. Following is my JSON response:
{
"alertItems": [
{
"id": "PROD-115388",
"errors": [
"Original Estimate is null",
"id is null"
],
"warnings": [
"Original Estimate is above threshold",
"Story points are above threshold",
"These sub tasks are not defined."
]
},
{
"id": "PROD-112479",
"errors": [],
"warnings": [
"Original Estimate is above threshold",
"Story points are above threshold",
"Estimate is missing for these sub tasks : PROD-112329"
]
},
{
"id": "PROD-108461",
"errors": [],
"warnings": [
"Original Estimate is above threshold",
"Story points are above threshold",
"These sub tasks are not defined : Test Case, BA Documentation Task, QA Design and Execute Task, BA/QA/Dev, BA Testing Task, QA Documentation Task, Elaboration"
]
}
],
"numberOfErrors": 0,
"numberOfWarnings": 10
}
I want to generate Table like following:
I have array of warnings and errors. I want to generate a row for each warning/error against its Id. How can I do that in jQuery datatables?

You may use ajax.dataSrc option to specify callback function that will transform your data to desired format:
const transform = data =>
data.alertItems
.map(({id, errors, warnings}) =>
[...errors.map(error => ({id, type: 'error', reason: error})),
...warnings.map(warning => ({id, type: 'warning', reason:warning}))])
.flat();
In order to group your table rows by matching id's in the first column, you may use rowspan HTML attribute set from within drawCallback function (in order to do that, you'll need to ensure that your table rows sorting order is fixed, so that items with the same id will go sequentially regardless of the sorting/filtering).
So, the complete example (with ajax part commented out, since it's not available within live snippet) might look, like:
//original JSON
const srcJSON = {"alertItems":[{"id":"PROD-115388","errors":["Original Estimate is null","id is null"],"warnings":["Original Estimate is above threshold","Story points are above threshold","These sub tasks are not defined"]},{"id":"PROD-112479","errors":[],"warnings":["OriginalEstimateisabovethreshold","Storypointsareabovethreshold","Estimateismissingforthesesubtasks: PROD-112329"]},{"id":"PROD-108461","errors":[],"warnings":["OriginalEstimateisabovethreshold","Storypointsareabovethreshold","Thesesubtasksarenotdefined: TestCase, BADocumentationTask, QADesignandExecuteTask, BA/QA/Dev, BATestingTask, QADocumentationTask, Elaboration"]}],"numberOfErrors":0,"numberOfWarnings":10};
//proper JSON
const transform = data => data.alertItems.map(({id, errors, warnings}) => [...errors.map(error => ({id, type: 'error', reason: error})),...warnings.map(warning => ({id, type: 'warning', reason:warning}))]).flat();
//datatables init
$('table').DataTable({
/*
ajax: {
url: //url to API endpoint returning original JSON
method: //http method (GET, POST, etc)
dataSrc: transform(data)
}
*/
data: transform(srcJSON), //this one should be dropped once ajax section uncommented
paging: false,
orderFixed: [0,'asc'],
columns: [
{data: 'id', title: 'Story Id'},
{data: 'type', title: 'Type'},
{data: 'reason', title: 'Warning Reason'}
],
//group by first col, using rowspan attribute
drawCallback: function(){
//clean up the view
$('tbody td').attr('rowspan',1).show();
//grab datatable into variable
const table = this.api();
//grab visible, sorted table rows
const rows = table.rows({search:'applied',order:'current'}).nodes();
var groupIdTd = null;
//run through the table rows and set 'rowspan' attribute for matching id's
$.each(rows, function(idx){
const rowspan = Number($(groupIdTd).attr('rowspan') || 1);
idx > 0 && table.cell(groupIdTd).data() == table.cell(this,0).data() ?
($(groupIdTd).attr('rowspan', rowspan+1), $(table.cell(this,0).node()).hide()) :
(groupIdTd = table.cell(this,0).node(), $(groupIdTd).attr('rowspan',1));
});
}
})
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.0/css/rowGroup.dataTables.min.css" />
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/rowgroup/1.1.0/js/dataTables.rowGroup.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<table></table>
</body>
</html>

Solution is to transform the data before passing it to DataTables using ajax.dataSrc option. Another component of the solution is third-party rowsGroup extension which allows to group rows with identical data.
var table = $('#example').DataTable({
'ajax': {
'url': 'https://api.myjson.com/bins/1b72lv',
'dataSrc': function ( data ) {
var resultData = [];
if(data.hasOwnProperty('alertItems')){
$.each(data.alertItems, function( index, record ) {
$.each(record.errors, function( index, message ) {
resultData.push([ record['id'], 'Error', message ]);
});
$.each(record.warnings, function( index, message ) {
resultData.push([ record['id'], 'Warning', message ]);
});
});
}
return resultData;
}
},
'rowsGroup': [0]
});
See this example for code and demonstration.
See jQuery DataTables: ROWSPAN in table body TBODY for more details on rowsGroup extension.

Render complicated Array into Datatables

I Have a really complicated Array that I want to display in DataTables in order to do some research and csv export.
An extract here of one page : https://api.myjson.com/bins/w8pzl
This is the structure :
[
[
{
title : "title",
stacks: {
stackname : "stackname",
stackValue : [
"value1","value2","value3"
]
},
..... multiple article
],
.....multiple pages
]
I don't know neither how to structure the table nor how to populate it.
My first try so far :
<div id="page-content-wrapper">
<div class="container">
<div class="row">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Stackname</th>
<th>stackvalue</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable({
"processing" : true,
"ajax" : {
"url" : "/",
dataSrc : ''
},
"columns" : [ {
"data" : "stackName"
}, {
"data" : "stackValue[,]"
}]
});
});
</script>
But it looks like I have to go through the all document to get my information..
If it's just not possible... I've done an easier version of my structure :
[
[
{
title : "title",
stacks: [
"value1","value2","value3"
]
},
..... multiple article
],
.....multiple pages
]
But still impossible to parse it.. i'm struggling with the two first array..
Edit with answer
Thanks to the help of the selected answer post I managed to get this code working :
$('#example').DataTable( {
"processing" : true,
"ajax": {
"url": "/",
"dataSrc" : function ( json ) {
return json.reduce(function(a, b) {
return a.concat(b)
}).map(function(value) {
return value.stacks
})
.reduce(function(a, b) {
return a.concat(b)
})
}
}
,... other configuration

You can use the ajax.dataSrc option as a function to manipulate the data returned from the server.
ajax.dataSrc
function ajax.dataSrc( data )
As a function dataSrc provides the ability to manipulate the data returned from the server from one form into another. For example, if your data is split over multiple arrays you might combine it into a single array to return for processing and display by DataTables. ...
Here is an example.
$('#example').DataTable( {
"ajax": {
"url": "https://api.myjson.com/bins/w8pzl",
"dataSrc" : function ( json ) {
return json[0].map(function(value) {
return value.stacks
})
.reduce(function(a, b) {
return a.concat(b)
})
}
},
"columns": [
{ "data": "stackName" },
{ "data": "stackValue[, ]" }
]
});
<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="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Stackname</th>
<th>stackvalue</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Stackname</th>
<th>stackvalue</th>
</tr>
</tfoot>
</table>

Uncaught ReferenceError with a seemingly defined variable

So I have this template that utilizes KendoUI to render a grid. Here's a part of it:
<script id="rowTemplateCourse" type="text/x-kendo-tmpl">
<tr data-cid="#: id #" class="course-row" id="course-row#: id #">
<td>
<span class="circle-indicator label-#if(package_is_active == 1){#success#}else{#danger#}#"></span>
</td>
<td>
#: course_name # - #= name#
</td>
<td>
<span class="badge element-bg-color-blue">ver. #:version_number#</span>
</td>
</tr>
</script>
I get the needed information from a php controller, that loads a variable in my view that holds this template. Variable holds this sort of data:
[1] => Array(
[id] => 544
[course_name] => Course for whatever
[price] => 52
[logo] => assets/images/new_course.png
[version_number] => 1
[parent_version_id] => 0
[course_price] => 52.00
[description_for_school] =>
[is_print_only] => 0
[offer_pdf] => 0
[pdf_final_price] => 0.00
[simple_course] => 0
[state_id] => 50
[name] => Tennessee
[cs_days_to_complete] => 120
[course_is_active] => 1
[user_in_course] => no
[user_is_waiting] => no
[days_to_complete] => 0)
In my view, I parse this variable like so:
var course_data = JSON.parse('<?php print(json_encode($courses));?>');
This works correctly and returns the same data like so (copy from console.log):
1: Object
course_is_active:"1"
course_name:"Course for whatever"
course_price:"52.00"
cs_days_to_complete:"120"
days_to_complete:0
description_for_school:""
id:"544"
is_print_only:"0"
logo:"assets/images/new_course.png"
name:"Tennessee"
offer_pdf:"0"
parent_version_id:"0"
pdf_final_price:"0.00"
price:"52"
simple_course:"0"
state_id:"50"
user_in_course:"no"
user_is_waiting:"no"
version_number: "1"
I load the data in a grid like so:
var courses_grid = $("#courses_grid").kendoGrid({
dataSource: {
data: course_data,
schema: {
model: {
fields: {
id: {
type: "number"
},
course_name: {
type: "string"
},
course_short_description: {
type: "string"
}
}
}
},
pageSize: 10,
},
toolbar: kendo.template($("#course-header-template").html()),
rowTemplate: kendo.template($("#rowTemplateCourse").html()),
groupable: false,
sortable: true,
selectable: "single",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
title: "Status",
width: 100
}, {
title: "Course Name",
}]
});
When the page loads, I get an error that course_is_active is not defined. I don't see how it's not defined, as it is clearly here and has a value. Can someone help me figure this out?
More info on the error:
Uncaught ReferenceError: course_is_active is not defined
(function(data
/**/) {
var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n\t <tr data-cid="'+$kendoHtmlEncode( id )+'" class="course-row" id="course-row'+$kendoHtmlEncode( id )+'">\n <td>\n <span class="circle-indicator label-';if(course_is_active == 1){;$kendoOutput+='success';}else{;$kendoOutput+='danger';};$kendoOutput+='"></span>\n </td>\n\t\t <td>\n '+$kendoHtmlEncode( course_name )+' - '+( name)+'\n\t\t </td>\n\t\t\t<td>\n <span class="badge element-bg-color-blue">ver. '+$kendoHtmlEncode(version_number)+'</span>\n\t\t </td>\n\t </tr>\n\n';}return $kendoOutput;
})

I have found the problem. In my PHP code, I am checking in the arrays if a value is equal to 0 and if it is, I am removing that element from the array. This happens to be the first element in the 2D array I load in the view, so when KendoUI starts to load variables in the table, it starts with the [0] index, that does not exist, and throws an error. Thanks to everyone that participated.

DataTables : DeferLoading is not working correctly

I have a mysql table with about 30000 rows. I have to put all rows in a DataTable and load each segment each time a table page is loaded (when you click on pagination). I saw that I can use the deferLoading parameter in my JS, but when I use it my pages are not loading. As you can see, I have to load images, so I absolutely have to do a light loading of the content...
Here is my HTML :
<table class="table table-striped table-bordered table-hover datatable products-datatable">
<thead>
<tr>
<th></th>
<th><?=_("Product")?></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th><?=_("Product")?></th>
<th></th>
</tr>
</tfoot>
</table>
Here is my JS :
var table = $('.products-datatable').dataTable( {
"order": [[ 1, "asc" ]],
"processing": true,
"serverSide": true,
"deferLoading": 30000,
"ajax": {
url: location.protocol + '//' + location.hostname + '/ajax/products.php?action=list',
type: "POST"
},
"columns": [
{ "data": "image",
"orderable": false,
"width": "80px" },
{ "data": "product" },
{ "data": "action",
"orderable": false,
"width": "20px",
"sClass": "class",
}
]
});
Here is my AJAX :
$req = $pdo->prepare('SELECT product_id, name FROM products');
if ( $req->execute() ) {
if ($req->rowCount()) {
$result['draw'] = 1;
$result['recordsTotal'] = $req->rowCount();
$result['recordsFiltered'] = 10;
$result['data'] = array();
$result['DT_RowId'][] = array();
while( $row = $req->fetch() ) {
if ($row['name']) { $name = $row['name']; } else { $name = "N/A"; }
$result['data'][] = array( "DT_RowId" => $row['product_id'],
"DT_RowClass" => 'myclass',
"image" => '<img src="' . HOSTNAME.'assets/img/products/' . $row['product_id'] . '.jpg" class="product_thumb">',
"product" => '' . $name . '',
"action" => "<i class=\"fa fa-close fa-2x text-danger\"></i>"
);
}
}
}
$req->closeCursor();
I'm sure there is something I missed... :-(

I believe you don't need to use deferLoading to benefit from server-side processing.
Your current script just returns all records and doesn't do sorting or filtering. You need to use ssp.class.php (available in DataTables distribution package) or emran/ssp class to correctly handle AJAX requests on the server.
DataTables library will send start and length parameters in AJAX request indicating which portion of the data is needed and your server-side processing class will correctly handle it for you.
Please see an example of server-side processing for more information.