I have the column filter js on my page along with my datatable and everything is coming up and working no errors in the console, but the inputs at the bottom are not there after the smoothness loads.
<body>
<div id="stable" style=" margin-left: 2%; margin-right: 2%; display: none">
<table class="display" id="table_id">
<thead>
<tr>
<th>Call Date</th>
<th>Unique ID</th>
<th>Source</th>
<th>App</th>
<th>Destination</th>
<th>Disposition</th>
<th>Duration</th>
</tr>
<tr>
<th>Call Date</th>
<th>Unique ID</th>
<th>Source</th>
<th>App</th>
<th>Destination</th>
<th>Disposition</th>
<th>Duration</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
$('#table_id').dataTable({
"sAjaxSource": '/php/connect/searchtablequery.php',
"bProcessing": true,
"sScrollY": "500px",
"bDeferRender": true,
"bDestroy": true,
"bFilter": true,
"aaSorting": [[0, 'desc']],
"sAjaxDataProp": "",
"fnServerParams": function (aoData) {
aoData.push({ "name": "db", "value": selected });
},
"aoColumns": [
{ "sWidth": "15%", "mData": "calldate" },
{ "sWidth": "15%", "sClass": "system", "sType": "string", "sWidth": "15%", "mData": "uniqueid" },
{ "sWidth": "15%", "sType": "string", "mData": "clid" },
{ "sWidth": "15%", "sType": "string", "mData": "lastapp" },
{ "sWidth": "15%", "sType": "string", "mData": "dst" },
{ "sWidth": "15%", "sType": "string", "mData": "disposition" },
{ "sWidth": "15%", "sType": "string", "mData": "duration_in_mins_and_secs" }, ],
"iDisplayLength": 20,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "collection",
"sButtonText": "Export",
"aButtons": ["csv", "xls", "pdf"]
}]
}
}).columnFilter({
aoColumns: [
{ type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] },
{ type: "text" },
null,
{ type: "number" },
{ type: "select", values: [ 'A', 'C', 'U', 'X'] },
null,
null,
null
]
});
Like i said it applies then is gone once the table fully initializes.
On my main page
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/table.css">
<link rel="stylesheet" href="/css/layout.css">
<script type="text/javascript" charset="utf-8" src="/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquery-ui.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/userdblist.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquerymask.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/columnFilter.js"></script>
I have the table php included into my main page with these
<link type="text/css" rel="stylesheet" href="/DataTables/media/css/smoothness/jquery-ui-1.10.3.custom.css"/>
<link type="text/css" rel="stylesheet" href="/DataTables/media/css/jquery.dataTables_themeroller.css"/>
<link type="text/css" rel="stylesheet" href="/DataTables/media/css/demo_table_jui.css" />
<link type="text/css" rel="stylesheet" href="/DataTables/extras/TableTools/media/css/TableTools.css" />
<script type="text/javascript" charset="utf-8" src="/DataTables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/DataTables/extras/TableTools/media/js/TableTools.js"></script>
<script type="text/javascript" charset="utf-8" src="/DataTables/extras/TableTools/media/js/ZeroClipboard.js"></script>
<script type="text/javascript" src="/js/search.js"></script>
I am also wanting the inputs to be at the top but that is another issue ill work on. Thank you for any help.
Not sure why the column filters don't show at all. Perhaps because you defined 8 of them, but the rest of your table has 7 columns?
To get the column filter inputs to the top, you need to move your second group of column headers from the tfoot section to the thead section:
<thead>
<tr>
<th>Call Date</th>
<th>Unique ID</th>
<th>Source</th>
<th>App</th>
<th>Destination</th>
<th>Disposition</th>
<th>Duration</th>
</tr>
<tr>
<th>Call Date</th>
<th>Unique ID</th>
<th>Source</th>
<th>App</th>
<th>Destination</th>
<th>Disposition</th>
<th>Duration</th>
</tr>
</thead>
<tbody>....
You also need to add sPlaceHolder as you set up columnFilter:
}).columnFilter({
sPlaceHolder: "head:after",
aoColumns: [ ...
Not sure what the capital T in your sDom represents. Do you want l or f?
It does not show up with "sScrollY" enabled on the datatable.
Related
I have the following very simple example using jQuery Datatables v1.10.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable(
{
"columnDefs": [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});
</script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
</head>
<body>
<table id="example" class="display" 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>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
</html>
Simple and works just fine. Remove the Sorting options from the columns just as I want to. However I want to use the stateSave option:
$(document).ready(function() {
$('#example').DataTable(
{ stateSave: true},
{
"columnDefs": [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});
But now the sorting is again available for all columns (the configuration from columnDefs is not applied).
So what I want to achieve is using the stateSave but still have the configuration for the sorting applied.
I am playing with
"stateLoadParams": function (settings, data) {
//console.log(settings);
settings.aoColumns[1].orderable = false;
console.log(settings);
}
Like so:
$(document).ready(function() {
$('#example').DataTable(
{ stateSave: true,
"stateLoadParams": function (settings, data) {
//console.log(settings);
settings.aoColumns[1].orderable = false;
console.log(settings);
}},
{
"columnDefs": [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});
But I am still not able to reapply the sorting options
The whole config should only be one object. You are creating multiple objects and therefore multiple arguments for the main datatable() function. Only the first argument is used for setting the internal options and the others are being ignored
Try
$(document).ready(function() {
$('#example').DataTable({
stateSave: true,
columnDefs : [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});
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 have the following code that is suppossed to generate report using datatables. But it keeps on failing giving me the following jquery datatbles error :
TypeError: d is undefined
...=f.nextSibling}else{d=b.anCells;f=0;for(b=d.length;f<b;f++)a(d[f])}return{data:e...
Below is my code that is supposed to generate the view , currently I get only a blank
<!DOCTYPE html>
<html lang="en">
<head>
<!--
-->
<meta charset="utf-8">
<title>Care-tech System</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Out patient Hospital Management System.">
<meta name="author" content="Harris Samuel Dindi">
</head>
<body>
<table id="test_trial" class="test_trial">
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet'>
<script type="text/javascript">
$(document).ready(function () {
$("#test_trial").DataTable({
stateSave: true,
"bautoWidth": false,
"aoColumns": [
{"sTitle": "Commodity No", "mData": "commodity_id"},
{"sTitle": "Commodity Name.", "mData": "commodity_name"
},
{"sTitle": "Strength", "mData": "strength"},
{"sTitle": "Commodity code", "mData": "commodity_code"},
{"sTitle": "Type.", "mData": "commodity_type"},
{"sTitle": "Commodity unit", "mData": "commodity_unit"},
{"sTitle": "Max Stock", "mData": "max_stock"},
{"sTitle": "Min sTOCK", "mData": "min_stock"},
{"sTitle": "Remarks", "mData": "remarks"},
],
"bDeferRender": true,
"bProcessing": true,
"bDestroy": true,
"bLengthChange": true,
"iDisplayLength": 20,
"sAjaxDataProp": "",
"sAjaxSource": '<?php echo base_url() . "pharmacy/commodity_managements"; ?>',
"aaSorting": [[2, "desc"]]
});
});
</script>
How can I do away with the error?
TypeError: d is undefined means your server-side php endpoint URL (pharmacy/commodity_managements) returns no data to the grid. Try to debug your php response.
Ishettyl gave an answer that is partly correct. The Data Table version is current, but the table properties that are being utilized are from the legacy edition of Data Tables. Changing all of your table properties to the 1.10.5 version should fix your issue. (example: change "mData" to "data", ect.)
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({
I am having a problem with my column filter, it is showing up but between my grey area of the datatable and my second thead row. It is functioning properly except for it has no background and no styling.
function tablefill(selected) {
$.fn.dataTableExt.sErrMode = 'throw';
$('.advsearchbar').show();
$('#stable').show();
$('#table_id').dataTable({
"sAjaxSource": '/php/connect/searchtablequery.php',
"bProcessing": true,
//"sScrollY": "500px",`
"bAutoWidth": false,
"bDeferRender": true,
"bDestroy": true,
"bFilter": true,
"aaSorting": [[0, 'desc']],
"sAjaxDataProp": "",
"fnServerParams": function (aoData) {
aoData.push({ "name": "db", "value": selected });
},
"aoColumns": [
{"sWidth": "40%","mData": "calldate" },
{"sWidth": "30%","sClass": "system", "sType": "string", "mData": "uniqueid" },
{"sWidth": "150%","sType": "string", "mData": "clid" },
{"sWidth": "10%","sType": "string", "mData": "lastapp" },
{"sWidth": "100%","sType": "string", "mData": "dst" },
{"sWidth": "50%","sType": "string", "mData": "disposition" },
{"sWidth": "5%","sType": "string", "mData": "duration_in_mins_and_secs" }, ],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"lrT>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "text",
"sButtonText": "Refresh",
"sButtonClass": "refresh",
"fnClick": function (nButton, oConfig, oFlash) {
var selected = $('#dblist').find(":selected").text();
tablefill(selected);
}
},
{
"sExtends": "collection",
"sButtonText": "Export",
"aButtons": ["csv", "xls", "pdf"]
}]
}
}).columnFilter({
sPlaceHolder: "head:before",
aoColumns: [
null,
{"type": "text","bRegex": true,"bSmart": true},
{"type": "text","bRegex": true,"bSmart": true},
{"type": "text","bRegex": true,"bSmart": true},
{"type": "text","bRegex": true,"bSmart": true},
{"type": "text","bRegex": true,"bSmart": true},
null
]
});
};
<body>
<div id="stable" style=" margin-left: 2%; margin-right: 2%; display:none;">
<table class="display" id="table_id" style="width: inherit;">
<thead>
<tr>
<th></th>
<th>Unique ID</th>
<th>Source</th>
<th>App</th>
<th>Destination</th>
<th>Disposition</th>
<th></th>
</tr>
<tr>
<th>Call Date</th>
<th>Unique ID</th>
<th>Source</th>
<th>App</th>
<th>Destination</th>
<th>Disposition</th>
<th>Duration</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
This is my css on the table
<link type="text/css" rel="stylesheet" href="/DataTables/media/css/smoothness/jquery-ui-1.10.3.custom.css"/>
<link type="text/css" rel="stylesheet" href="/DataTables/media/css/jquery.dataTables_themeroller.css"/>
<link type="text/css" rel="stylesheet" href="/DataTables/media/css/demo_table_jui.css" />
<link type="text/css" rel="stylesheet" href="/DataTables/extras/TableTools/media/css/TableTools.css" />