Using datatables on Table created using java script - Not working does not show paging
Using datatables on Table created using java script - Not working does not show paging
kulkarni_ash
Posts: 35Questions: 8Answers: 0
I am trying to use datatable on table created using java script, we have many tables created by java script and it would be nice if we can use data tables on there tables, here is my HTML code, can some one take a look and see what is missing
This table does not show paging for some reason
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Insert title here
function buildTable() {
var tableData = document.createElement('table');
tableData.setAttribute('width', '100%');
tableData.setAttribute('id', 'example');
tableData.setAttribute('class', 'display');
var thRow = document.createElement('tr');
var thHeader = document.createElement('th');
var thHeaderData = document.createTextNode('Method');
thHeader.appendChild(thHeaderData);
thRow.appendChild(thHeader);
thHeader = document.createElement('th');
thHeaderData = document.createTextNode('Document');
thHeader.appendChild(thHeaderData);
thRow.appendChild(thHeader);
var th = document.createElement('thead');
th.appendChild(thRow);
tableData.appendChild(th);
var tableBody = document.createElement('tbody');
for(var i = 0; i < 50; i++) {
var trow = document.createElement('tr');
//add method
var tdata = document.createElement('td');
var text = 'Method ' + i;
var data = document.createTextNode(text);
tdata.appendChild(data);
trow.appendChild(tdata);
tdata = document.createElement('td');
text = 'Document ' + i;
data = document.createTextNode(text);
tdata.appendChild(data);
trow.appendChild(tdata);
tableBody.appendChild(trow);
}
tableData.appendChild(tableBody);
var id = tableData.id;
jQuery.noConflict();
jQuery(tableData).dataTable({
"bSort" : false,
"sPaginationType" : "full_numbers",
"bProcessing" : true,
"bDeferRender" : true,
"bDestroy" : true
});
var divT = document.getElementById("tableHolder");
divT.appendChild(tableData);
}
jQuery(document).ready(function() {
buildTable();
});
Create table
[/code]
This table does not show paging for some reason
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Insert title here
function buildTable() {
var tableData = document.createElement('table');
tableData.setAttribute('width', '100%');
tableData.setAttribute('id', 'example');
tableData.setAttribute('class', 'display');
var thRow = document.createElement('tr');
var thHeader = document.createElement('th');
var thHeaderData = document.createTextNode('Method');
thHeader.appendChild(thHeaderData);
thRow.appendChild(thHeader);
thHeader = document.createElement('th');
thHeaderData = document.createTextNode('Document');
thHeader.appendChild(thHeaderData);
thRow.appendChild(thHeader);
var th = document.createElement('thead');
th.appendChild(thRow);
tableData.appendChild(th);
var tableBody = document.createElement('tbody');
for(var i = 0; i < 50; i++) {
var trow = document.createElement('tr');
//add method
var tdata = document.createElement('td');
var text = 'Method ' + i;
var data = document.createTextNode(text);
tdata.appendChild(data);
trow.appendChild(tdata);
tdata = document.createElement('td');
text = 'Document ' + i;
data = document.createTextNode(text);
tdata.appendChild(data);
trow.appendChild(tdata);
tableBody.appendChild(trow);
}
tableData.appendChild(tableBody);
var id = tableData.id;
jQuery.noConflict();
jQuery(tableData).dataTable({
"bSort" : false,
"sPaginationType" : "full_numbers",
"bProcessing" : true,
"bDeferRender" : true,
"bDestroy" : true
});
var divT = document.getElementById("tableHolder");
divT.appendChild(tableData);
}
jQuery(document).ready(function() {
buildTable();
});
Create table
[/code]
This discussion has been closed.
Replies
Just change the order of these couple of lines, and the pagination works fine for me:
[code]
var divT = document.getElementById("tableHolder");
divT.appendChild(tableData);
jQuery(tableData).dataTable({
"bSort" : false,
"sPaginationType" : "full_numbers",
"bProcessing" : true,
"bDeferRender" : true,
"bDestroy" : true
});
[/code]
Hope this helps.