Dynamicly changing table properties - post initialization

Dynamicly changing table properties - post initialization

Lior.GersonLior.Gerson Posts: 3Questions: 0Answers: 0
edited April 2009 in General
Hello Allan,

Great Project!
I have no problem to initialize the table. Everything works fine.
At a certain point in the time i want to change the sorting function without reinitializing the table. How can i do it?

What i mean is this:
I have a column with price data.
and an external link that changes the data in that column to price per unit (which has a different format)
How can i change the sorting function used by that column?

Thanks!
Lior Gerson.

Replies

  • allanallan Posts: 63,237Questions: 1Answers: 10,418 Site admin
    Hi Lior,

    Interesting one! What you could do for this is assign a custom sort function ( http://datatables.net/development#sorting ) for the column in question (use sType to make the column use that function: http://datatables.net/usage#sType and http://datatables.net/examples/example_sorting_plugin.html ).

    Then you can simply replace the sorting function with whatever it is that you want when the link is activated to load the secondary data.

    Hope this helps,
    Allan
  • Lior.GersonLior.Gerson Posts: 3Questions: 0Answers: 0
    Hi Allan,

    Changing the sorting function was not a problem and it works great.

    The problem is that the data needs to be changed also, from "$14.45" format to "$1.5/(50ml)" format.
    First i tried to update the elements in this was $("TD.Price")....(after using the fnGetNodes) it worked great, but the sorting function
    was still getting the old data since the data is cached inside the aoData object.

    So i had to use the fnUpdate Api.
    but since i needed to call it for every row in the table, and its a big table :) ... say 1000 rows, then it takes to long and crashes the browser.

    By the way - i need this treatment for more then one column in the table.

    Could you suggest a better way for me to do all this on the client? or would you suggest that i fall back to an Ajax update?

    Should i extend the Api so the fnUpdate just changes the data without all the functionality?

    Thank!
    Lior Gerson.
  • allanallan Posts: 63,237Questions: 1Answers: 10,418 Site admin
    Hi Lior,

    Yup - this certainly is an interesting one! The fastest way to update the entire table would be for you to have the new data in a Javascript array (or are you recalculating it based on what is currently available?) and then loop over aoData updating the _aData and nTr properties as you go (i.e. more or less the same as fnUpdate(), but doing it yourself to get maximum speed, rather than calling another function, which calls others in turn). If you are recalculating the data then this might indeed add a bit of time to the redraw.

    So there are a couple of other options I can think of which might work for you:

    1. Have two columns in the table (html coming from a server with database access I presume?) - one for each format. Then you can show and hide the columns as you need using the fnSetColumnVis() API function (only in 1.5 beta). Simply switch between the two formats as needed - this will be lightening quick.

    2. Reload the data from the server as you suggest using the fnReloadAjax() plug-in (probably need a small modification to tell the server which format you want).

    Hope this helps,
    Allan
  • Lior.GersonLior.Gerson Posts: 3Questions: 0Answers: 0
    Hi Allan,

    I solved the problem by adding a new API function that just updates the cached data.
    Do you think it is worth adding to a future release?

    /*
    * Function: fnDataUpdate
    * Purpose: Updates the data of a row only.
    * Returns: -
    * Inputs: Object:iRowObject - the row (from aoData) to update
    * int:iRowIndex - the column to update
    */
    this.fnRowDataUpdate = function(iRowObject, iRowIndex)
    {
    var oSettings = _fnSettingsFromNode(this[0]);
    var dataRow = oSettings.aoData[iRowIndex]._aData;
    $(iRowObject).find("TD").each(function(n)
    {
    dataRow[n] = $(this).html();
    });
    }
  • allanallan Posts: 63,237Questions: 1Answers: 10,418 Site admin
    Hi Lior,

    Nice idea for an API function! I can certainly see a place for a function like this in future versions of DataTables. I'd like to experiment with this function a little if that's okay before I do make a decision to include it or not (I'll certainly put it on the plug-ins page soon) as it might be nice to make it a little bit more generic, so it can accept multiple rows, DOM nodes (perhaps?) etc. A little thinking is required to see how it might be used by others as well.

    Regards,
    Allan
This discussion has been closed.