I already include the CDN like that the website provide and still unable to show or display any result even when copy pasted every single line of code.
Here is the CDN
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
Here is my code
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<body>
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
Here is the script
[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300"
}
]
$('#example').DataTable( {
data: data,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' }
]
} );
You are missing two things:
JQuery library
The data variable
Please check the solution below.
var data = [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300"
}
]
$('#example').DataTable({
data: data,
columns: [{
data: 'name'
},
{
data: 'position'
},
{
data: 'salary'
}
]
});
<html>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<body>
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
</html>
Jquery datatables.js needs jquery.
You should add it before jquery.datatables.js.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
And you even don't need to define columns in your datatable, datatables does the work itself :
<body>
<table id="example" class="display" width="100%"></table>
</body>
<script>
var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
];
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
} );
} );
</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 have a DataTable that is created dynamically according to the result of a SELECT, the first time it is created it does not give me any problem, but when I change the SELECT, still reloading the table, the data of it cannot be accessed
In the browser console appears this error message:
Uncaught TypeError: can't access property "name", informe is undefined
file:///C:/Users/jordi.burgos/Downloads/ejemplo minimo/index.js:40
jQuery 8
file:///C:/Users/jordi.burgos/Downloads/ejemplo minimo/index.js:36
jQuery 2
You can see this error in https://codepen.io/jordibonarea/pen/OJvNOZB
I have created a minimum code to be able to model the example:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo mínimo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<script src="index.js"></script>
</head>
<body>
<h1>Este es el ejemplo mínimo para que de error el DataTable</h1>
<select name="prueba_select" id="prueba_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<table id="table_prueba"></table>
<div id="item_selected"> </div>
</body>
</html>
index.js
$(document).ready(function () {
$('#prueba_select').change(function (e) {
e.preventDefault();
var $tabla_modal_informes = $('#table_prueba').DataTable({
destroy: true,
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": 5421
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "5300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
},
// ...
],
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
});
//cuando hacemos click en sus filas
$('#table_prueba').on('click','tr',function () {
//$tabla_modal_informes.rows().deselect();
// Ontiene datos de la fila seleccionada
let informe = $tabla_modal_informes.row(this).data();
$('#item_selected').html('<h3>' + informe.name +'</h3>');
});
});
});
Thanks
I just changed the scope where $table_modal_informes is defined putting its declaration outside of the ready event handler so that you'll have only one reference to one DataTable object at any given time.
As you can see in the snippet, now you are free to select rows from the table any time also after the selected data table was changed from the corresponding dropdown:
var $tabla_modal_informes;
$(document).ready(function () {
$('#prueba_select').change(function (e) {
e.preventDefault();
$tabla_modal_informes = $('#table_prueba').DataTable({
destroy: true,
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": 5421
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "5300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
},
// ...
],
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
});
//cuando hacemos click en sus filas
$('#table_prueba').on('click','tr',function (event) {
//$tabla_modal_informes.rows().deselect();
// Ontiene datos de la fila seleccionada
let informe = $tabla_modal_informes.row(this).data();
$('#item_selected').html('<h3>' + informe.name +'</h3>');
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo mínimo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
</head>
<body>
<h1>Este es el ejemplo mínimo para que de error el DataTable</h1>
<select name="prueba_select" id="prueba_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<table id="table_prueba"></table>
<div id="item_selected"> </div>
</body>
</html>
i m not able to make the following table dynamic using datatables plugin. here I am fetching json data using api and dynamically adding it to html table. i am not able to add datatables plugin and make it to work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covid tracker</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="table-responsive container">
<table class="table table-bordered table-hover ">
<thead class="table-dark">
<tr>
<th scope="col">Country</th>
<th scope="col">TotalConfirmed</th>
<th scope="col">TotalDeaths</th>
<th scope="col">TotalRecovered</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</body>
<script>
tbody = document.getElementById("tbody");
text = "";
data();
async function data() {
api = await fetch("https://api.covid19api.com/summary");
result = await api.json();
populate(result);
}
function populate(data) {
for (let x of data.Countries) {
text += ` <tr><td class="table-warning">${x.Country}</td><td class="table-danger">${x.TotalConfirmed}</td><td class="table-success">${x.TotalDeaths}</td><td class="table-primary">${x.TotalRecovered}</td></tr > `;
tbody.innerHTML = text;
}
}
</script>
</html>
The URL you are using already returns data as JSON:
{
"ID": "028dd159-922a-41cf-a768-892259b0adab",
"Message": "",
"Global": {
"NewConfirmed": 307033,
"TotalConfirmed": 171061979,
"NewDeaths": 12153,
"TotalDeaths": 3562587,
"NewRecovered": 428741,
"TotalRecovered": 108837399,
"Date": "2021-06-02T14:23:45.417Z"
},
"Countries": [
{
"ID": "35c3910f-e19a-48b4-afba-549e22cd4aac",
"Country": "Afghanistan",
"CountryCode": "AF",
"Slug": "afghanistan",
"NewConfirmed": 0,
"TotalConfirmed": 72977,
"NewDeaths": 0,
"TotalDeaths": 2973,
"NewRecovered": 0,
"TotalRecovered": 57741,
"Date": "2021-06-02T14:23:45.417Z",
"Premium": {}
},
...
],
"Date": "2021-06-02T14:23:45.417Z"
}
DataTables handles JSON out-of-the-box, so there is no need for any additional handler logic.
Your HTML table should be given an ID, so that DataTables can refer to it:
<table id="example" ...>
Your resource references in the page header appear to be completely missing what you need to support DataTables. You can go to the official download page, and select the ones you want to use.
Your page is missing the DataTables object, which points to the HTML table you want to use:
$('#example').DataTable( {...} );
Here is an example:
$(document).ready(function() {
$('#example').DataTable( {
"ajax": {
"url": "https://api.covid19api.com/summary",
"dataSrc": "Countries"
},
"columns": [
{ data: "Country", className: 'table-warning' },
{ data: "TotalConfirmed", className: 'table-danger' },
{ data: "TotalDeaths", className: 'table-success' },
{ data: "TotalRecovered", className: 'table-primary' }
]
} );
} );
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covid tracker</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="table-responsive container">
<table id="example" class="table table-bordered table-hover ">
<thead class="table-dark">
<tr>
<th scope="col">Country</th>
<th scope="col">TotalConfirmed</th>
<th scope="col">TotalDeaths</th>
<th scope="col">TotalRecovered</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</body>
</html>
Beyond that, you can explore the many examples on the official web site.
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>
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.