DataTables logo DataTables

via Ad Packs
Bootstrap 2 w/ Datatables 1.9 - Tweaks needed
  • Vote Up0Vote Down rfitzwaterrfitzwater
    Posts: 32
    All,

    Looking for some help on a project I am tinkering with. I am using Bootstrap 2 for the layout and Datatables 1.9. I have things working okay right now, but I'd like to make some tweaks/fixes here and there. I'm hoping this community can help.

    Here is a link to my test page: http://comm.rider.edu/datatable/mytest.html

    Here are the problems/changes I need to make:
    1. I am using some custom css to hide all checkboxes and replace them with a star graphic. This works for the items in the table that are displayed initially, but not all rows have this. I am assuming this is a DOM issue, but I'm not sure how to fix. Any ideas?

    2. I am using the ColVis script to show/hide columns. I have the show/hide button moved to my Options modal window as I want to keep all options here. What I would like to know is if it is possible to have all the button/checkboxes to hide/show each column in a DIV as opposed to having to click the show hide button and then select which ones you want to show and hide. I'm sure it is possible, but I'm looking for advice on how to best accomplish this.

    3. My table has a lot of data, based on what you can see from the source, is there a better/more efficient way I should be configuring things? I would like this to be as fast as possible when done.

    As always thanks to Allan for the great work on this script and thanks to the community for the assistance provided!

    -Rhon
  • 7 Comments sorted by
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    1. I am using some custom css to hide all checkboxes and replace them with a star graphic

    I presume that there is some Javascript involved in this somewhere? Just a guess since you say that the elements on the initial page work, and the others don't. You either need to use fnGetNodes or the $ API method to operate on all nodes in the paged table, or initialise that Javascript before you do DataTables. See: http://datatables.net/faqs#events

    2. [...] What I would like to know is if it is possible to have all the button/checkboxes to hide/show each column in a DIV as opposed to having to click the show hide button and then select which ones you want to show and hide

    There isn't a built in way in ColVis to do that, but ColVis is simply a wrapper around the fnSetColumnVis API method for DataTables. So all you have to do is create the interface as you want and then attach Javascript handlers that will call the API method to show / hide columns.

    3. My table has a lot of data, based on what you can see from the source

    Actually I'm getting errors when loading the page at the moment so I can't see what is going on I'm afraid. Is it Ajax loading data? Enable the bDeferRender option if you are using Ajax loading with paging to get a real speed boost :-)

    Allan
  • Vote Up0Vote Down rfitzwaterrfitzwater
    Posts: 32
    I presume that there is some Javascript involved in this somewhere? Just a guess since you say that the elements on the initial page work, and the others don't. You either need to use fnGetNodes or the $ API method to operate on all nodes in the paged table, or initialise that Javascript before you do DataTables. See: http://datatables.net/faqs#events

    Nope, its just CSS. <http://www.google.com/url?sa=t&rct=j&q=.skinned-form-controls&source=web&cd=1&ved=0CCMQFjAA&url=http%3A%2F%2Facidmartin.wordpress.com%2F2011%2F02%2F24%2Fcustom-crossbrowser-styling-for-checkboxes-and-radio-buttons%2F&ei=_xMsT9fvPIq3twfBh-DlDw&usg=AFQjCNHLFst1CLKFlHG14UJmTcGWLLHQSA>;

    Actually I'm getting errors when loading the page at the moment so I can't see what is going on I'm afraid. Is it Ajax loading data? Enable the bDeferRender option if you are using Ajax loading with paging to get a real speed boost :-)
    Adding the bDeferRender is what is causing that JS error. I removed it so you don't get that error any more. Take a look now if you can. And yes I am using AJAX for loading data.
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    The cells with the star checkboxes that work have a LABEL tag around the checkbox, which according to the linked article is how this method works. The cells in that column just have a checkbox and no LABEL tag. So I guess the question is - what is putting the LABEL there and why isn't it working on some cells.

    The LABEL tag is coming from the server in the JSON, so I guess that not all the data for the cells is being generated as needed there.

    Allan
  • Vote Up0Vote Down rfitzwaterrfitzwater
    Posts: 32
    The LABEL tag is coming from the server in the JSON, so I guess that not all the data for the cells is being generated as needed there.

    Dumb on my end. My php script that was generating the json file was missing the addition of the label attribute for the second group of data I was pulling. Fixed and now all rows have the star.

    Actually I'm getting errors when loading the page at the moment so I can't see what is going on I'm afraid. Is it Ajax loading data? Enable the bDeferRender option if you are using Ajax loading with paging to get a real speed boost :-)

    Do you have any idea why my table would be getting the error you saw when I add the bDeferRender option?
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    I suspect (although I'm not sure without testing it) that it is the "dom-checkbox" sorting function. That function called _fnGetNodes - which is fine and fair enough, however, when deferred rendering is enabled not all nodes are created (only those needed for an individual draw). So fnGetNodes is going to be returning null for those rows, and I suspect the plug-in isn't coping with that.

    Allan
  • Vote Up0Vote Down rfitzwaterrfitzwater
    Posts: 32
    allan said: I suspect (although I'm not sure without testing it) that it is the "dom-checkbox" sorting function. That function called _fnGetNodes - which is fine and fair enough, however, when deferred rendering is enabled not all nodes are created (only those needed for an individual draw). So <a href="/ref#fnGetNodes">fnGetNodes</a> is going to be returning null for those rows, and I suspect the plug-in isn't coping with that.

    So any suggestions on how to get this working so my page/data loads faster. If not using bDeferRender, is there other things I can do to make things work better? I'm going to be recommending users that have IE be at version 9. That should help, but overall speed improvement would be great!
  • Vote Up0Vote Down allanallan
    Posts: 10,261
    I'd suggest that a modification to the live DOM sorting plug-in is needed. If a TR node for a row is found to be null, then push 0 onto the array (since I presume that a row can't be checked without having the row existing first? Otherwise you will need to refer to the data for the row as well).

    Allan
Add a Comment

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Support

Get useful and friendly help straight from the source.

Categories

In this Discussion