I have written a small sample program to bind JSON data in a grid using Datatable
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
<table id="example">
<thead>
<tr><th class="site_name">symbol</th><th>qunatity </th></tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(function(){
var r = [
{"symbol":"BPCL","qunatity":"1222"},{"symbol":"HDCF","qunatity":"2333"}
]
$("##example").dataTable({
"aaData":r,
"bJQueryUI": true,
"bDestroy": true,
"iDisplayLength": 50,
"bProcessing": true,
"aaSorting": [[0, 'desc']],
"aoColumns": [
{ "mData": "symbol" },
{ "mData": "qunatity" }
],
});
})
</script>
</body>
</html>
When i ran this program except the header , no data is being displayed , could you please let me know what might the cause for it ??
You have an extra # in $("##example").dataTable({
Related
I am trying to use DataTables with Tabledit , but I am getting "TypeError: Cannot set properties of undefined (setting 'nTf')". The number of tags are also matching.
To make it work if I comment the "editable" object it doesn't show any error. How can i make it work? But this part is required by the lib as it will make only those column editable.
<html>
<head>
<title>Person Information</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
<script>
$(document).ready(function () {
var baseurl = "https://run.mocky.io/v3/391adcbb-160c-4111-b853-2e273700676b";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", baseurl, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var persons = JSON.parse(xmlhttp.responseText);
$.fn.dataTable.ext.errMode = 'none';
$("#example").DataTable({
data: persons,
"columns": [{
"data": "id"
},
{
"data": "username"
},
{
"data": "email"
},
{
"data": "avatar"
}
]
});
}
};
xmlhttp.send();
$('#example').Tabledit({
url: 'action.php',
dataType: 'json',
eventType: 'dblclick',
editButton: false,
columns: {
identifier: [0, 'id'],
editable: [
[1, 'username'],
[2, 'email']
]
}
});
});
</script>
</head>
<body>
<div class="container">
</div>
<div class="container">
<table id="example" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
You can re-structure how your DataTable calls its Ajax data, by using the DataTables built-in support for Ajax.
You can then apply the Tabledit functionality to the resulting DataTable, using the initComplete option.
$(document).ready(function() {
var baseurl = "https://run.mocky.io/v3/391adcbb-160c-4111-b853-2e273700676b";
$("#example").DataTable({
ajax: {
url: baseurl,
dataSrc: ""
},
columns: [{
data: "id"
},
{
data: "username"
},
{
data: "email"
},
{
data: "avatar"
}
],
initComplete: function(settings, json) {
$('#example').Tabledit({
//url: 'action.php',
dataType: 'json',
eventType: 'dblclick',
editButton: false,
columns: {
identifier: [0, 'id'],
editable: [
[1, 'username'],
[2, 'email']
]
}
});
}
});
});
<html>
<head>
<title>Person Information</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
</head>
<body>
<div class="container">
</div>
<div class="container">
<table id="example" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Now, if you run the above code snippet, and then double-click on a value in the username or email columns, the cell will become editable.
Note - I commented out your action.php option because I do not have that file. So, edits are not sent/saved anywhere.
i got error on my console browser , it happen when i wanna add export button in dataTable server side. i have been import all required js library to my header .
this is my error at browser console :
Uncaught TypeError: D.Buttons is undefined
at buttons.html5.min.js:11:425
and
Uncaught TypeError: w.Buttons is undefined
at buttons.flash.min.js:31:1
my generate datatable report function :
// Generate DataTable Function
window.generateDataTable = function (selector, ajax, data = null, columns, pageLength = 5, createdRow = null, btnExport = null, buttons = null) {
let ajaxParams = {
url: ajax,
type: 'GET',
dataType: 'JSON',
headers: {
"Authorization": 'Bearer ' + sessionGetter.token
},
}
data !== null ? ajaxParams.data = data : false
selector.DataTable({
autoWidth: false,
lengthChange: false,
retrieve: true,
processing: true,
serverSide: true,
dom: 'Bfrtip',
buttons: [
'copy','csv','print', 'excel', 'pdf'
],
pageLength: pageLength,
language: {
info: '',
infoFiltered: "filter dari _MAX_ total data"
},
ajax: ajaxParams,
columns: columns,
columnDefs: [{
targets: '_all',
createdCell: function (td, cellData, rowData) {
$(td).addClass('align-middle text-center')
},
}],
createdRow: createdRow,
}).draw()
}
My header :
<!-- DataTable -->
<script src="<?= $url ?>/component/assets/vendor/DataTables/js/jquery.dataTables.min.js"></script>
<script src="<?= $url ?>/component/assets/vendor/DataTables/js/dataTables.bootstrap4.min.js"></script>
<script src="<?= $url ?>/component/assets/vendor/DataTables/js/buttons.html5.min.js"></script>
<script src="<?= $url ?>/component/assets/vendor/DataTables/js/buttons.flash.min.js"></script>
<script src="<?= $url ?>/component/assets/vendor/DataTables/js/buttons.print.min.js"></script>
<script src="<?= $url ?>/component/assets/vendor/DataTables/js/dataTables.buttons.min.js"></script>
<script src="<?= $url ?>/component/assets/vendor/DataTables/js/jszip.min.js"></script>
<script src="<?= $url ?>/component/assets/vendor/DataTables/js/pdfmake.min.js"></script>
<script src="<?= $url ?>/component/assets/vendor/DataTables/js/vfs_fonts.js"></script>
<link rel="stylesheet" href="<?= $url ?>/component/assets/vendor/DataTables/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="<?= $url ?>/component/assets/vendor/DataTables/css/buttons.dataTables.min.css">
if you get something missing and wrong please tell me . i really confuse about this issue
Had the same issue when was trying to repeat this demo https://datatables.net/extensions/buttons/examples/initialisation/export.html.
The problem disappears if place import of dataTables.buttons.min.js before buttons.html5.min.js.
This is a working example for that tutorial:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.1.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.1.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.1.0/js/buttons.print.min.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
</head>
<body >
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</table>
</body>
</html>
I am trying to understand why Datatables (https://datatables.net/) Responsive wouldn't be working. Everything else is working great, paging, searching, ordering, etc.. but not responsive?
Below is what I have.
Bootstrap v3.3.6
$(function () {
$('#ManageUsers').DataTable({
paging: true,
lengthChange: true,
searching: true,
ordering: true,
info: true,
autoWidth: true,
responsive: true
});
});
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<!-- JS -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script>
<!-- CODE -->
<table id="ManageUsers" class="table table-bordered table-striped display responsive">
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
Any help will be greatly appreciated.
Try loading the libraries in this order like in the DEMO.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="datatables#*" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script>
<link href="//cdn.datatables.net/responsive/2.1.1/css/dataTables.responsive.css"/>
<link data-require="datatables#*" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link data-require="bootstrap#*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
You are missing
https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css in
your header and missed nowrap in class according to their examples.
I personally would suggest to initiate responsive dataTable via javascript as
it will provide more options to customise your UI.
Please refer to these links for reference
https://datatables.net/extensions/responsive/examples/initialisation/default.html
https://datatables.net/extensions/responsive/examples/initialisation/className.html
https://datatables.net/extensions/responsive/examples/initialisation/option.html
Try using width=100% in table. Not pretty, but it worked for me.
Just use this script at the bottom of your file
<script>
$(function () {
$("#manageUsers").DataTable({
"bLengthChange": false,
"bPaginate": true,
"bInfo": false,
"autoWidth": false,
"order": [[0, "desc"]],
responsive: true,
"processing": true,
"serverSide": false,
"sAjaxSource": "data.js",
"columns": [
{ "data": "name[, ]" },
{ "data": "hr.0" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "hr.2" },
{ "data": "hr.1" }
});
</script>
It worked for me.
I try this table feature
https://datatables.net/examples/basic_init/scroll_xy.html
i have dropdown and date picker so i add links for table and datetime picker links then i add table and also i use script for this but when i select datetime picker then calendar is not display then when i check console this show error
I try to export table data in excel
WebForm1.aspx:34 Uncaught TypeError: $(...).Datatable is not a function
CODE
<%--for tabledata--%>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="Styles/stylechart.css" rel="stylesheet" />
<!--for date--%>-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabledata").Datatable({
dom: 'Bfrtip',
buttons: [
'excelHtml5'
]
});
});
</script>
<table id="tabledata" cellspacing="0" class="display nowrap inner_table">
</table>
updated:
success: function (result) {
var final = JSON.parse(result.d).response;
console.log(JSON.parse(result.d).response);
$("#tabledata").empty();
if (final.length > 0) {
$("#tabledata").append(
"<thead><tr><th>RegNo</th></tr></thead>");
for (var i = 0; i < final.length; i++) {
if (final[i] !== null) {
$("#tabledata").append("<tbody><tr><td>" +
final[i][0] + "</td> </tr></tbody>");
}
}
}
you are using multiple references of jquery file.Also order is more important for any plugin to work properly.
Also try to avoid writing protocol http or https before script reference , just add simple // and it will automatically detect on which protocol your app is working and load reference file according to it.
change your reference section to scripts like given below.
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="Styles/stylechart.css" rel="stylesheet" />
<!--for date--%>-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabledata").Datatable({
dom: 'Bfrtip',
buttons: [
'excelHtml5'
]
});
});
</script>
<table id="tabledata" cellspacing="0" class="display nowrap inner_table">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
</table>
try this:
$('#tabledata').DataTable({
sDom: 'TC<"clear">lfrtip',
"iDisplayLength": 10,
"oTableTools": {
***add*** "sSwfPath": "//cdn.datatables.net/tabletools/2.2.0/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy",
"csv",
"xls",
{
I'm trying to create table with DataTable library (that using foundation-zurb),
This is the table html code:
<table dir="rtl" id="example" class="display responsive nowrap" cellspacing="0" width="100%; " >
<thead style="margin-top:0%;">
<tr class="top-table" >
<th><label class="tableHeaders">מספר</label></th>
<th><label class="tableHeaders"><fmt:message key="email" /></label></th>
<th><label class="tableHeaders"><fmt:message key="department1" /></label></th>
<th><label style="float:right;"><fmt:message key="role1" /></label></th>
<th></th>
</tr>
</thead>
<tbody>
<c:forEach items="${listAdmin_user}" var="Admin_user" varStatus="status">
<tr>
<td>${status.index + 1}</td>
<td>${Admin_user.email}</td>
<td>${Admin_user.departmentObj.inCurrentLanguage}</td>
<td>${Admin_user.roleObj.inCurrentLanguage}</td>
<td>
<img src="resources/images/update.gif">
<img src="resources/images/erase.gif">
</td>
</tr>
</c:forEach>
</tbody>
</table>
also I added this scripts to my html file:
(to initial the table and add DataTable files that located in my project folders)
<script src="r/lib/foundation-sites/bower_components/jquery/dist/jquery.js"></script>
<script src="r/lib/foundation-sites/bower_components/foundation-sites/dist/foundation.js"></script>
<script src="r/lib/foundation-sites/bower_components/foundation-sites/dist/foundation.min.js"></script>
<script src="resources/DataTables-1.10.12/DataTables-1.10.12/media/js/jquery.dataTables.min.js"></script>
<script src="resources/Responsive-2.1.0/js/dataTables.responsive.min.js"></script>
<script>
$(document).foundation();
$(document).ready(function() {
var dataTable = $('#example').DataTable(
{
"language": {
"url": "resources/DataTables-1.10.12/DataTables-1.10.12/hebrew.json"
},
"columnDefs": [ {
"targets": [5,6],
"orderable": false
},
{ responsivePriority: 1, targets: 0 },
{ responsivePriority: 2, targets: 1 },
{ responsivePriority: 3, targets: 5 },
{ responsivePriority: 4, targets: 6 }
],
responsive: true,
}
);
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
});
$("#searchbox").on("keyup search input paste cut", function() {
dataTable.search(this.value).draw();
});
});
</script>
(on the end of jsp page).
Here is the links:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<link href="resources/cssf/addCss.css?version=6" rel="stylesheet" >
<link rel="stylesheet" href="resources/foundation-icons/foundation-icons.css" />
<link rel="stylesheet" href="resources/DataTables-1.10.12/DataTables-1.10.12/media/css/dataTables.foundation.min.css"/>
<link rel="stylesheet" href="resources/DataTables-1.10.12/DataTables-1.10.12/media/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="resources/Responsive-2.1.0/css/responsive.dataTables.min.css"/>
<link href="r/css/app.css" rel="stylesheet" >
My problem is that the DataTable not working,
I get error on this line in js file:
i._DT_CellIndex={row:b,column:l};g.push(i);if((!c||n.mRender||n.mData!==l)&&(!h.isPlainObject(n.mData)||n.mData._!==l+".display"))i.innerHTML=B(a,b,l,"display");n.sClass&&(i.className+=" "+n.sClass);n.bVisible&&!c?j.appendChild(i):!n.bVisible&&c&&i.parentNode.removeChild(i);
The error:
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
I also using DataTable in another pages and its working fine, only on this page I got this error.
Someone have any idea about my problem?
The mismatch in the number of header columns cause this issue, there should be equal number of header columns and the row columns.
Please change your script to below script it will work for you !!!.
<script>
$(document).foundation();
$(document).ready(function() {
var dataTable = $('#example').DataTable(
{
"language": {
"url": "resources/DataTables-1.10.12/DataTables-1.10.12/hebrew.json"
},
"columnDefs": [ {
"targets": [2,3],
"orderable": false
},
{ responsivePriority: 1, targets: 0 },
{ responsivePriority: 2, targets: 1 },
{ responsivePriority: 3, targets: 2 },
{ responsivePriority: 4, targets: 3 }
],
responsive: true,
});
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
});
$("#searchbox").on("keyup search input paste cut", function() {
dataTable.search(this.value).draw();
});
});
</script>