I'm trying to nest a jQuery DataTable in a main DataTable. I am able to create the child table and populate it, but when I try and copy the HTML into a JavaScript function that shows the nested row, I get an error since the HTML has line breaks, extra spaces and is not wrapped in quotes.
How can I get this to work?
<link rel="stylesheet" type="text/css" href="/css/dataTables.jqueryui.css" />
<script type="text/javascript" charset="utf8" src="/scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="/Scripts/dataTables.jqueryui.js"></script>
<script type="text/javascript" charset="utf8" src="/scripts/tinymce/tiny_mce.js"></script>
<style type="text/css">
#ethicsOpinions_wrapper select {
width: auto;
}
.ui-dialog-content.ui-widget-content {
padding: 10px 30px 10px 15px;
}
td.details-control {
background: url('/images/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('/images/details_close.png') no-repeat center center;
}
</style>
<script type="text/javascript">
var ethicalRulesTableHtml;
$(function () {
ethicalRulesTableHtml = $("#ethicalRulesGrid").html();
var table = $('#ethicalRulesSections').DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRulesSections",
"order": [[1, 'asc']],
stateSave: false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": null,
className: "dt-center details-control",
"defaultContent": "",
"width": "20px",
"orderable": false
},
{
"data": 0,
"visible": false
},
{
"data": 1,
"width": "50px",
className: "dt-center"
},
{
"data": 2
}
]
});
// Add event listener for opening and closing details
$('#ethicalRulesSections 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');
}
});
});
function format(d) {
$('#ethicalRules').DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRules/" + d[0],
"order": [[1, 'asc']],
"width": "630px",
stateSave: false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": 1,
"visible": false
},
{
"data": 2,
"width": "50px",
className: "dt-center"
},
{
"data": 3
}
],
"initComplete": function (settings, json) { return $('#ethicalRules')[0].outerHTML; }
});
}
</script>
<div id="ethicalRulesSectionsGrid">
<table id="ethicalRulesSections" cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row">
<thead>
<tr>
<th></th>
<th></th>
<th>Section Number</th>
<th>Section</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="ethicalRulesGrid">
<table id="ethicalRules" cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row" style="margin:0 0 0 110px;">
<thead>
<tr>
<th></th>
<th>Rule Number</th>
<th>Rule</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
Basically the solution is to clone your child table HTML template, add a new child row using HTML content of the cloned element, locate the added table and create a DataTables object based on that.
You need to remove id attribute form your child table as shown below and make its container initially hidden.
HTML
I have omitted some of your HTML code, only child table is shown below.
<div id="ethicalRulesGrid" style="display:none">
<table cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row" style="margin:0 0 0 110px;">
<thead>
<tr>
<th></th>
<th>Rule Number</th>
<th>Rule</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
JavaScript
var ethicalRulesTableHtml;
$(function () {
ethicalRulesTableHtml = $("#ethicalRulesGrid").html();
var table = $('#ethicalRulesSections').DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRulesSections",
"order": [[1, 'asc']],
stateSave: false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": null,
className: "dt-center details-control",
"defaultContent": "",
"width": "20px",
"orderable": false
},
{
"data": 0,
"visible": false
},
{
"data": 1,
"width": "50px",
className: "dt-center"
},
{
"data": 2
}
]
});
// Add event listener for opening and closing details
$('#ethicalRulesSections tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// Destroy child table
tr.next().find('table').DataTable().destroy();
// This row is already open - close it
row.child.remove();
tr.removeClass('shown');
}
else {
// Open this row
format(table, tr);
}
});
});
function format(table, tr) {
var row = table.row(tr);
var d = row.data();
tr.addClass('shown');
// Clone child table and insert it as child row
row.child($('#ethicalRulesGrid').clone().html()).show();
// Locate child table
var $child_table = tr.next().find('table');
// Initialize child table
$child_table.DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRules/" + d[0],
"order": [[1, 'asc']],
"width": "630px",
"stateSave": false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": 1,
"visible": false
},
{
"data": 2,
"width": "50px",
className: "dt-center"
},
{
"data": 3
}
]
});
}
Related
Please help. I am not sure where I am going wrong
I want the table to be sorted by the first column. I tried several variations, but sort is not working properly
dataTable = $("#deptDtTable").dataTable({
"bFilter" : false
"bProcessing" : true,
"bServerSide" : true,
"bSort" : true,
"bStateSave" : false,
"iDisplayLength" : 25,
"iDisplayStart" : 0,
"fnDrawCallback" : function() {
},
"sAjaxSource" : "/url/url/datatable/dept",
"aaSorting": [[ 1] ],
"aoColumns" : [
{
"mData" : 'id'
}, {
"mData" : 'client_name'
}, {
"mData" : 'ssn'
}, {
"mData" : 'department'
}, {
"mData" : 'account_id'
}, {
"mData" : 'dateEntered',
"render" : function(data) {
if (data !== null) {
var date = new Date(data);
return date.toLocaleString();
} else {
return '';
}
}
} ]
});
This is what I did, and the sorting works on the first column.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index62</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('#example').
dataTable({
"processing": true,
"serverSide": true,
"info": true,
"stateSave": true,
"ajax": {
"url": "/Home/AjaxGetJsonData",
"type": "GET"
},
"columns": [
{ "data": "Name", "orderable": true },
{ "data": "Age", "orderable": false },
{ "data": "DoB", "orderable": true }
],
"order": [[0, "asc"]]
});
});
</script>
</head>
<body>
<div style="margin:30px;">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr style="text-align:left;">
<th>Name</th>
<th>Age</th>
<th>DoB</th>
</tr>
</thead>
<tfoot>
<tr style="text-align:left;">
<th>Name</th>
<th>Age</th>
<th>DoB</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
You can try like this
dataTable = $("#deptDtTable").dataTable({
"bFilter" : false
.......
"aaSorting": [[ 0, "desc" ]] // Sort by first column descending
......
});
Following is the HTML code:
<table id="myTable" class="dTable1 contentList table table-bordered" style="z-index: 2; ">
<thead id="tableHeader">
<tr id="headerRow">
<th>Time</th>
<th>Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I am initializing the table on popup open using below JavaScript code:
showHistory = function (contentID) {
debugger;
var auditRes;
//var oTable = $('#AuditListtable').dataTable();
//oTable.fnDestroy();
//alert("outside");
$('#AuditListtable').dataTable({
"sAjaxSource":SERVERURL?contentId=' + contentID,
"aoColumns": [
{ "mData": "AccessDate" },
{
"mData": "EventDescription",
"bSortable": false
},
{
"mData": "IPAddress",
"bSortable": false,
"mRender": function (data, type, row) {
debugger;
return '<td> <span title="' + data + '">Played By: ' + row.FirstName + ', IP Address: ' + data + '</span></td>';
}
}
],
"paging": true,
"sDom": '<"top"p<"clear">>rt',
"sPaginationType": "full_numbers",
"searching": false,
"bFilter": false,
"processing": true,
"bServerSide": true,
"order":true,
"sServerMethod": "POST",
"bAutoWidth": false,
"iDisplayLength": 8
});
$('#historyPopup').modal('show');
}
The data will be populated in pop up. Currently we are having total 9 records but pagination is showing as 5 pages. After clicking on another page, it displays previous record. Table is not refreshed.
You've enabled server-side processing with "bServerSide": true. Most likely your response is incorrect.
If you indeed want server-side processing, your response should be something like:
{
"sEcho": 1,
"iTotalRecords": 9,
"iTotalDisplayRecords": 9,
"aaData": [
// ... skipped ...
]
}
where sEcho should have the value of sEcho parameter from the request, iTotalRecords is number of all records before the filtering, and iTotalDisplayRecords is number of all records after the filtering.
See server-side processing for more information.
I've a problem when using datatables serverside adding column with parameter. when create datatables serverside without additional column (just query list form database) it is works fine.
But i've difficulty when I want add one column that has value ID.
My script (JS) :
var dataTable = $('#mytablex').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"<?php echo base_url();?>admin/ap_invoice/getPOs", // json datasource
type: "post", // method , by default get
"data": {
"posupplier_id": $('#vendor_id').val()
},
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#mytablex").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
}
},
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<input type='checkbox' id='supid[]' name='supid[]'>"
} ]
} );
when i'm adding
<input type='checkbox' id='supid[]' name='supid[]'>
how to fill with value each rowid , i want become like this
<input type='checkbox' id='supid[]' name='supid[]' value='row->po_id'>
or you can use select ext.
$(document).ready(function () {
var events = $('#events');
var table = $('#example').DataTable({
//you can change data to ajax, there is an example
data: [{
"id": 1,
"name": "datatables",
"position": "anywhere",
"office": "stackoverflow",
"age": 18,
"salary": 341
}],
dom: 'Bfrtip',
columns: [
{
"data": "id"
},
{
"data": "name"
},
{
"data": "position"
},
{
"data": "office"
},
{
"data": "age"
},
{
"data": "salary"
}
],
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[1, 'asc']],
buttons: [
{
text: 'Get selected data',
action: function () {
var count = table.rows({
selected: true
}).count();
events.prepend('<div>' + count + ' row(s) selected</div>');
var data = table.rows({
selected: true
}).data().toArray();
//print whole row data
console.log(data);
//print id
console.log(data[0].id);
}
}
]
});
});
#events {
margin-bottom: 1em;
padding: 1em;
background-color: #f6f6f6;
border: 1px solid #999;
border-radius: 3px;
height: 100px;
overflow: auto;
}
<link href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I am building an app using Meteor. I am using the jquery datatables package - www.datatables.net to present my data/records. According to the documentation, I would connect the table to my MongoDB database by:
$('#example').DataTable( {
serverSide: true,
ajax: '/data-source'
});
The part I am unclear of is the 3rd line - Can someone help me understand how to make an ajax call to return data from my MongoDB database?? Here is more documentation on server-side processing for datatables:
https://datatables.net/manual/server-side
I have a collection named Products with the fields description, brand, price.
<table id="example">
<thead id="dataTable-header">
<tr>
<th>ID</th>
<th>NAME</th>
</tr>
</thead>
</table>
var dataTable = $('#example').DataTable({
"orderable": false,
'searching': true,
"paging": true,
language: {
processing: "<i class='fa fa-refresh fa-spin'></i>"
},
"processing": true,
"serverSide": true,
"ajax": urlData,
"columns":[
{
"orderable": false,
"class": "details-control",
"data": null,
"defaultContent": ""
},
{"orderable": false, "data": "name" }
],
"columnDefs": [{
"targets": 3,
"render": function (data, type, row) {
return '<a name="editAnchor" class="fa fa-ban"></a>';
},
"className": 'text-center'
}]
});
urlData is your json data with fields Id and Name.
I have a project created on PHP laravel, and I'm immplementig Ajax on all my options that have datatables, I was working fine but somehow my Ajax stop working and don't know why.
When I select and option on my web site with a Datatable shows the mesage:
Datatables warning: table id=example - Ajax error. For more
information aboute this error, please see http://datatables.net/tn/7
And don't show my content tables. When I select right click->inspect element show the mesage:
Failed to load resource: the server responded http://tienda.local.com/ajax/getJSONResultsForDT?table=tipos&primaryKey=id&…art=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1423606401783
Network
Request URL:http://tienda.local.com/ajax/getJSONResultsForDT?table=tipos&primaryKey=id&draw=1&columns%5B0%5D%5Bdata%5D=id&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=clave_tipo&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=nombre_tipo&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=created_at&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=false&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=false&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=3&order%5B0%5D%5Bdir%5D=desc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1423606554946
I don't know what is that bug.
This is my code:
<script type="text/javascript">
$(function () {
oDtable = $('#example').dataTable({
"scrollY": 300,
"order": [3, 'desc'],
"processing": true,
"serverSide": true,
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf",
"aButtons": ["copy", "xls", "csv", "print"]
},
"ajax": "/ajax/getJSONResultsForDT?table=tipos&primaryKey=id",
"columns": [
{"data": "id"},
{"data": "clave_tipo"},
{"data": "nombre_tipo"},
{"data": "created_at"},
{"data": null},
{"data": null}
],
"columnDefs": [
{
"targets": [0],
"visible": false
},
{
"targets": [4],
"orderable": false,
"data": null,
"render": function (data, type, full, meta) {
return '<a data-toggle="modal" class="btn btn-info" href="tipos/' + data.id + '/edit" data-target="#myModal">EDITAR</a>';
}
},
{
"targets": [5],
"orderable": false,
"data": null,
"render": function (data, type, full, meta) {
var urlFormated = ''+data.nombre_tipo+'';
var encodedUrl = encodeURIComponent(urlFormated);
return '<a data-toggle="modal" class="btn btn-danger" href="/delete?id=' + data.id + '&nombre=tipos&nombretipo='+encodedUrl+'" data-target="#myModalDestroy">ELIMINAR</a>';
}
}],
"bPaginate": true,
"sPaginationType": "full_numbers",
"language": {
"url": "assets/js/DataTables-1.10.0/lang/" + "<?php echo $lang; ?>" + ".lang"
}
});
});
</script>
HTML
<table id="example" class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>ID</th>
<th>CLAVE TIPO</th>
<th>NOMBRE TIPO</th>
<th>FECHA CREACION</th>
<th>EDITAR</th>
<th>ELIMINAR</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Any help will be grateful!