Trouble with Features

efledderman

I was handed a project that utilizes DataTables 1. 8, which seems to be a great option from creating and manipulating tables in jQuery. I was easily able to get DataTables to dynamically create a table based off of any 2D array that I throw at it, however that's as far as I have been able to get. The rest of the features (Sorting, Pagination, etc) don't seem to work or even appear at all. I've read through this entire site a few times and can't seem to find much information aside from initialisation code (i.e. "bSort": true) and customization code, both of which course I've tried of course. Any help would be appreciated.

allan

If sorting isn't working then most likely there is a Javascript error occuring. Can you link us to the page please?

Allan

efledderman

Here's the HTML:

[code]



google.load("jquery", "1");



$(document).ready(function(){
dtExecute("planning");
dtExecute("closed");
});


DataTable Draft


<!-- Begin ViewPort Plugin -->




<!-- End ViewPort Plugin -->


[/code]


Here's the JS:

[code]
function dtExecute(dtTarget){
//* Variable Declaration
var dtArray;
var dtFooter;
var dtHeader;
var dtTable;
var dtTitle;

//* Variable Initial Definitions
dtTitle = dtTarget.toLowerCase().replace(/\b[a-z]/g, titleCase);
function titleCase() {
return arguments[0].toUpperCase();
}

//* Include Array
dtArray = document.createElement('script');
dtArray.src = "arrays/" + dtTarget.toLowerCase() + ".js" + top.document.referrer;
document.getElementsByTagName("head").item(0).appendChild(dtArray);

//* Compile Data Table Header
dtHeader = "" +
"\n" +
" \n" +
" " + dtTitle + "\n" +
" Add Record | Delete Record\n" +
" \n" +
" \n" +
" ";

//* Compile Data Table Footer
dtFooter = "" +
"\n" +
" \n" +
" " +
" « ‹ 1-" + group01.length + " of " + group01.length + " › »" +
" " +
"";

//* Function Calls
dtBuild();

//* Apply DataTable()
function dtApply () {
dtTable = $("#dtDataContainer").dataTable({
"bSort": true
});
$("#dtDataContainer").removeAttr("style");
$("#dtDataContainer").wrap("");
}

//* Compile Data Table
function dtBuild () {
dtTable = "\n";
for(var i=0; i< group01.length; i++) {
rowattributes = '';
workrow = '';
attrels = group01[i].slice(0,1);
attrels = attrels.toString();
attrs = attrels.split("|");
for(var ii=0; ii < attrs.length; ii++) { //* Determine Row Attributes
rowattr = attrs[ii].toString();
workrow = rowattr.split(":");
rowattributes = rowattributes + workrow[0] + "=\"" + workrow[1] + "\" ";
}
rowvals = group01[i].slice(1).toString();
rowvals = rowvals.split(",");
if (i == 0) { //* Set Header Row Attributes
dtTable = dtTable +
" " +
" \n";
for(var rv=0; rv < rowvals.length; rv++) {
dtTable = dtTable +
" " + rowvals[rv] + "\n";
}
dtTable = dtTable +
" \n" +
" \n" +
" \n";
} else { //* Set Body Row Attributes
if(i%2 == 0){
dtTable = dtTable +
" \n";
} else {
dtTable = dtTable +
" \n";
}
for(var rv=0; rv < rowvals.length; rv++) { //* Set Cell Value
dtTable = dtTable +
" " + rowvals[rv] + "\n";
}
dtTable = dtTable +
" \n" +
" \n";
}
}
dtTable = dtTable +
" ";
$("#dt" + dtTitle).html(dtHeader + dtTable + dtFooter);
dtApply();
}
}
[/code]

allan

DataTables requires a THEAD and TBODY ( http://datatables.net/usage/ ) - that might be the issue (the dtExecute doesn't include those elements). If not, have a look at the firebug console and see what that says.

Allan

efledderman

Those tags are are located on lines 69, 77, 78, & 93 of the JS. Now, I've never used those tags before and although they seem simple enough maybe the syntax there is incorrect somehow, but not that I see.

So for now I'll move on to Firebug and see what it says. Any further suggestions will be great. I'll update with any findings. Thanks.

allan

The thing was that you appear to have two tables being built - one with thead / tbody and one without - which set off that first little warning bell. But yes - Firebug next :-)

Allan

efledderman

I haven't solved the problem yet, but I am leaning towards this being a CSS issue. Will update later.