How to apply columnDefs on jquery Datatable with saveState opiton to true

How to apply columnDefs on jquery Datatable with saveState opiton to true - javascript

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 }
]
});
});

Related

Do you see any issues with this GetData script for SharePoint?

I have included the JS and HTML script to see if anyone may see issues with these scripts? They are for a SharePoint list and both files are stored in a site asset library.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/SiteAssets/GetData.js"></script>
<!--External js file to get data from SharePoint List -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/css/dataTables.jqueryui.min.css">
</head>
<body>
<div>
<table id="table_id" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Joining Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Joining Date</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
<!--GetData JS script below-->
function loadItems() {
var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('EmployeeInfoTest')
/items?$select=Title,Position,Office,Age,Joining_x0020_Date";
$.ajax({
url: oDataUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: mySuccHandler,
error: myErrHandler
});
}
function mySuccHandler(data) {
try {
$('#table_id').DataTable({
"aaData": data.d.results,
"aoColumns": [
{
"mData": "Title"
},
{
"mData": "Position"
},
{
"mData": "Office"
},
{
"mData": "Age"
},
{
"mData": "Joining_x0020_Date"
}
]
});
} catch (e) {
alert(e.message);
}
}
function myErrHandler(data, errMessage) {
alert("Error: " + errMessage);
}
The first portion is the HTML page, and then the second part of the script is the JS. I have commented out where the JS script starts.
Here is the output I get in SharePoint-image below:
GetData output error

well error is hard to find but still u have missed out few steps when starting with js
this link i have sent will help u out
https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/

I didn't find where you call the function loadItems, I load SharePoint list data after DOM ready usually as _spPageContextInfo depends on SharePoint JS libraries init(so _spPageContextInfo may not init correctly if you use it if you not delay your rest request ).
Sample demo:
<table id="example" class="wpDataTable" style="width:100%">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>City</th>
<th>TestNumber</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Title</th>
<th>City</th>
<th>TestNumber</th>
</tr>
</tfoot>
</table>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('listtitle')/items?$select=Title,City,TestNumber&$orderby=Created",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (result) {
_Data = result.d.results;
$('#example').DataTable({
columns: [
{ "data": "Title" },
{ "data": "City" },
{ "data": "TestNumber" }
],
data: _Data,
"displayLength": 25
})
},
error: function (error) {
console.log(JSON.stringify(error));
}
})
})
</script>

JQuery DataTable not working

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>

DataTable, export to pdf is not working properly with two headers and colspan

I am using a data table to display my data and I want to export them to pdf.
I followed steps listed in example given in this link.
I am having a table in which I want two headers and out the two headers, one header having colspan i.e. as shown below
<th colspan=3>
So, when I try to export the table to pdf, it gives me only one header and that too having full column description.
My code snippet with all the required CSS and JS files is as below:
<link href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dataTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
<table id="dataTable" cellspacing="0" width="auto">
<thead>
<tr>
<th colspan = 3></th>
<th colspan = 3>IMP values</th>
</tr>
<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>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
The image below shows, table as seen in the browser
The image below shows, table as seen after exported to pdf
So, how can I get two headers in pdf using data table?
Thanks in advance.

The pdf exporting function currently only consider 1 row of column header, hence only one header row is exported.
In order to export with two header rows, we can make use of the customize option provided in the pdf export button. This option allow us to manipulate the pdf document object before export. By referring pdfmake documentation and the playground for table, we can see that the following changes are required to have more than one table header row.
Set the headerRows (no of header row) of the table to 2.
Insert the missing header row to the first of the pdf table body, as the header row cell given has col-Span, empty cell need to add to the header row to ensure each row have the same number of cells.
The following code snippet demonstrates the above changes.
Due to Download in Sandboxed Iframes (removed), the button in the code snippet will not work, you may copy the following code to an html file, and open the file with a browser to see the effect.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dataTable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', {
extend: 'csv',
"download": "download"
}, {
extend: 'excel',
"download": 'download'
}, {
extend: 'pdf',
text: 'Export with two row headers',
download: 'download',
customize: function(pdfDocument) {
pdfDocument.content[1].table.headerRows = 2;
var firstHeaderRow = [];
$('#dataTable').find("thead>tr:first-child>th").each(
function(index, element) {
var colSpan = element.getAttribute("colSpan");
firstHeaderRow.push({
text: element.innerHTML,
style: "tableHeader",
colSpan: colSpan
});
for (var i = 0; i < colSpan - 1; i++) {
firstHeaderRow.push({});
}
});
pdfDocument.content[1].table.body.unshift(firstHeaderRow);
}
}, {
extend: 'print',
download: 'download'
}
]
});
});
</script>
<table id="dataTable" cellspacing="0" width="auto">
<thead>
<tr>
<th colspan=3></th>
<th colspan=3>IMP values</th>
</tr>
<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>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>

DataTable : Using a function with ajax.reload()

I have some troubles with the method ajax.reload() - nothing happens. I've tested with this JavaScript:
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": {
"async": false,
"url": "arrays.txt",
"dataSrc": function(json){return json;} // really necessary ?
}
} );
$('#reload').click(function () {
table.ajax.reload(function(data){
console.log(data);
}, false);
} );
} );
arrays.txt contents :
[
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
]
]
and html contents :
<button id="reload">reload</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
If I change "your" code (dataTables.js) to
if(callback){
var api = new _Api( settings );
callback( api.ajax.json() );
}
instead of
if(callback){
var api = new _Api( settings );
api.one( 'draw', function(){
callback( api.ajax.json() );
});
}
it works for me...
Actually, it works if you click a second time on the button, but this is not a solution.

Your code works fine.
I have removed async: false, it seems unnecessary, however the code works with this option as well.
Option dataSrc is needed because you're returning array of arrays as your data, but it could be simplified as dataSrc: "". From the manual:
Note that if your Ajax source simply returns an array of data to display, rather than an object, set this parameter to be an empty string.
See the example below for demonstration.
$(document).ready(function () {
// AJAX emulation for demonstration only
$.mockjax({
url: 'arrays.txt',
responseTime: 200,
response: function(settings){
this.responseText = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
new Date(),
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
new Date(),
"$170,750"
]
]
}
});
var table = $('#example').DataTable({
"ajax": {
url: "arrays.txt",
dataSrc: ""
}
});
$('#reload').click(function () {
table.ajax.reload(function(data){
console.log(data);
}, false);
} );
});
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
</head>
<body>
<button id="reload">reload</button>
<table id="example" class="display" cellspacing="0" 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>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</body>
</html>

datatable column filter not showing up

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.

Develop Reference

JavaScript is the programming language of the Web.

How to apply columnDefs on jquery Datatable with saveState opiton to true - javascript

Related

Do you see any issues with this GetData script for SharePoint?

JQuery DataTable not working

DataTable, export to pdf is not working properly with two headers and colspan

DataTable : Using a function with ajax.reload()

datatable column filter not showing up

Categories

Resources