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>
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 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 want to implement ordering but it is not working.
Can you tell me the reason why? What do I need to change to make it work so that my data is displayed in order?
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Spring pagination using data tables</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> -->
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
//Plug-in to fetch page data
jQuery.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
};
$(document).ready(function() {
var table=$("#table").DataTable( {
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"scrollY":"120px",
"scrollCollapse": true,
"order": [[ 3, "desc" ]],
"oLanguage": {
"oPaginate": {
"sNext": '>',
"sLast": '»',
"sFirst": '«',
"sPrevious": '<'
}
},
"sort": "position",
//bStateSave variable you can use to save state on client cookies: set value "true"
"bStateSave": false,
//Default: Page display length
"iDisplayLength": 10,
//We will use below variable to track page number on server side(For more information visit: http://legacy.datatables.net/usage/options#iDisplayStart)
"iDisplayStart": 0,
"fnDrawCallback": function () {
$('table #table td').bind('mouseenter', function () { $(this).parent().children().each(function(){$(this).addClass('datatable');}); });
$('table #table td').bind('mouseleave', function () { $(this).parent().children().each(function(){$(this).removeClass('datatable');}); });
//Get page numer on client. Please note: number start from 0 So
//for the first page you will see 0 second page 1 third page 2...
//alert("Current page number: "+((this.fnPagingInfo().iPage)+1));
},
"sAjaxSource": "${pageContext.request.contextPath}/EmployeeData",
"aoColumns": [
{ "mData": "firstName" },
{ "mData": "lastName" },
{ "mData": "emp_Id" },
{ "mData": "email_ID" },
{ "mData": "phone_No" },
{ "mData": "city" },
{ "mData": "Edit",
render:function(data ,type,row){
return 'Edit';
},
},
{ "mData": "View",
render:function(data ,type,row){
return 'View';
},
},
{ "mData": "Delete",
render:function(data ,type,row){
/* return '<button><a id="btn" href="${pageContext.request.contextPath}/delete?emp_Id='+row.emp_Id+'">Delete</a></button>'; */
/* return Delete */
return 'Delete';
/* return '<button id="delete_Id" empId='+row.emp_Id+'>Delete</button>'; */
/* return 'Delete'; */
},
},
]
}
);
} );
function deleteEmp(emp_Id){
if(confirm("are you sure want to delete this ID : "+emp_Id)){
window.location = "${pageContext.request.contextPath}/deleteEmp?emp_Id="+emp_Id;
}
else{
return false;
}
}
</script>
<style>
#table{
align:center;
}
#btn{
text-decoration:none;
}
#h{
text-align:center;
color:blue;
}
#link3{
float:right;
margin-right:5px;
}
#link4{
float:right;
}
#brk{
height: 10px;
}
.datatable{
background-color: #ddd !important;
}
</style>
</head>
<body>
<form:form action="" method="GET">
<h2 id="h" >Employee Details<br><br></h2>
<div>
Add New Employee
<a id="link4" href="${pageContext.request.contextPath}/bulkExport">EmployeeBulkExport</a>
<a id="link3" href="${pageContext.request.contextPath}/fileUploadForm">EmployeeImport </a>
</div>
<div id = "brk"></div>
<table width="100%" style="border: 3px;background: rgb(243, 244, 248);"><tr><td>
<table id="table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>firstName</th>
<th>lastName</th>
<th>emp_Id</th>
<th>email_Id</th>
<th>phone_No</th>
<th>City</th>
<th>Edit</th>
<th>View</th>
<th>Delete</th>
</tr>
</thead>
</table>
</td></tr></table>
</form:form>
</body>
</html>
CAUSE
You have server-side processing enabled with "bServerSide": true. In this mode searching, filtering and pagination should be done on the server-side.
Most likely your server-side script (${pageContext.request.contextPath}/EmployeeData) isn't programmed to do so, that's why you don't see ordering/filtering/pagination working.
See manual for more information on processing modes.
SOLUTION
Remove "bServerSide": true to enable client-side processing.
Alternatively, if you have a large dataset you may look into implementing ordering/filtering on the server based on supplied parameters.
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 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.