Trouble with Features

Trouble with Features

efleddermanefledderman Posts: 7Questions: 0Answers: 0
edited August 2011 in Plug-ins
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.

Replies

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    If sorting isn't working then most likely there is a Javascript error occuring. Can you link us to the page please?

    Allan
  • efleddermanefledderman Posts: 7Questions: 0Answers: 0
    edited August 2011
    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]
  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    edited August 2011
    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
  • efleddermanefledderman Posts: 7Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    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
  • efleddermanefledderman Posts: 7Questions: 0Answers: 0
    I haven't solved the problem yet, but I am leaning towards this being a CSS issue. Will update later.
This discussion has been closed.