DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Sort Icons display but sorting not happening

Sort Icons display but sorting not happening

swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
edited March 2014 in DataTables 1.10
Hi ,

I am new to this plugin and trying to use it on html table which has custom formatting. I applied the basic dataTable functionality on the table , I can see the sort icons on the headers but sorting is not happening when clicked. I have a and structure. Can any one please help me to understand this ?

Thanks,
Swathi.
«1

Replies

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
    http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Hi Tangerine ,

    Sorry about that , here is the jfiddle link , http://jsfiddle.net/cCzqn/113/
    The td contents are inputs which are disabled , sorting on the columns is not happening.

    Thanks,
    Swathi.
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    Its because you have your text in an `input` element. DataTables strips HTML by default since you typically don't want to sort HTML, and since the display value is only a property of the element, it goes as well.

    To address this, DataTables has live DOM abilities via plug-ins: http://datatables.net/release-datatables/examples/plug-ins/dom_sort.html

    Allan
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Hey Allan ,

    Thanks for the reply now I understand , i tried adding the input function to the code and I still could not make it work. Can you please help me fixing this. Here is the updated fiddle. http://jsfiddle.net/cCzqn/122/

    Thanks
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    @Allan ,

    Thanks for the link , I got it worked :) . One question though , should I mention all the columns under "aoColumns": or just the columns which I need a sort icon on them ? As I can see that sort wouldn't work If I am not mentioning all the columns. In my real application I have nearly 30 cols . So is there any way to overcome this . Thanks once again

    - Swathi
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    aoColumns _must_ define every column in the table. Use aoColumnDefs if you want to define options for just some select columns - see the documentation here: http://datatables.net/usage/columns

    Allan
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Thanks for the info. I could not make this work on my real application , the search box, sort icons previous and next buttons are shown , but seems to be disabled. I added the jquery.dataTables.min.js and the css file . Is there anything more I should add. I replicated the same table with less columns in the fiddle. The fiddle worked perfect! But now facing issue with my actual code. Any help .
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    We'd need to be able to see the actual code. If the fiddle works okay, but the production code doesn't, then there is something wrong wight he production code :-).

    Allan
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Thanks for the prompt reply .. I doubt if the html table is picking up the datatable js file. Is there a way to check if the plugin is applied on the table ? I can see the icons of sort , pagination , search box , but no functionality at all . Any suggestions would be helpful.

    Thanks much.
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    Yes there is a static function for that: http://datatables.net/api#fnIsDataTable .

    Allan
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Hey Allan ,

    I am totally stuck , this is the debugger link, I cannot understand why there is no functionality at all when I applied the DataTable to my DOM , client side Html table. Help needed :(
    http://debug.datatables.net/icehal . How could I delete the old debug data ? I have 28 columns which are input text boxes with text in it.

    - Sorting not working . no change on clicks of the icons
    - search box always says no records matching
    - pagination : only icons are displayed disabled and I can see all 700 rows.





    $.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
    {
    return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
    return $('td:eq('+iColumn+') input', tr).val();
    } );
    }
    $('#tableone').dataTable( {
    "aoColumns": [
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},

    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},

    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text" },

    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" }

    ]
    });



    Thanks,
    Swathi.
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Hey Allan ,

    I tried figuring out what would be wrong but no luck . Can you please give me some scenarios where this kind of behavior might occur.
    - Showing sort arrows on header but no sorting functionality when clicked .
    I added the js file and css file , added the functions to sort the live dom elements as above. But still I cant figure out where I am going wrong.

    Kindly help.

    Thanks,
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    It sounds very much like there is a Javascript error on the page. Is there nothing in the browser's error console? I would be extremely surprised if there isn't since you appear to have 27 columns in your HTML, but only 5 defined in your aoColumns. That will cause an error. They _must_ match.

    Allan
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Allan ,

    That was the old record I believe , first time I used the debugger on an example , when I am trying to apply debugger with my real application its taking more time to process and just says loading the data to server . I am trying to figure out how to delete the old debug data but could not find any delete button . Can you please tell me how I can delete the debug data . Once If I can do that , I will be able to debug my actual application and send you more information about where I am stuck .

    Thanks,
    Swathi.
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Hey Allan or anyone ,

    I know you guys would be pretty busy with replying ... but can you please help me understand why the basic data table functionality is not working for me.
    -Pagination shows prev next buttons but clicks does not work , it shows all entries even if i requested for 10 .
    -sorting is not happening at all , but i can see the icons . I have inputs in the column with mixed content like this (MM2333R88).
    -Search box is displayed but no functionality.

    I checked fnIsDataTable or not and it returns true.
    Real time application is a DOM HTML Table which is generated using the info that comes from the database , after the table is ready with all the records then I apply this plugin on that.

    I can provide you the debug information if you can guide me how to delete the old one and debug the real application.

    Any help would be appreciated , thanks once again

    Thanks,
    Swathi.
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    FYI I am using DataTables-1.9.4 .
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Hey ,

    Is there anyone who can help me ?

    Thanks,
  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
    [quote]I can provide you the debug information if you can guide me how to delete the old one.../quote]
    Forget the old one - just submit a new debug reference.
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    @tangerine : I am trying to run the debug on my application , its just taking too long . "uploading to the server " , this is the message it shows .
  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
    Does your browser's error console tell you anything?
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    I've deleted your old debug trace now.

    We are really going to need a link to your page to be able to offer any help here I think. We are really just guessing without being able to actually see the problem, and actually offer some help.

    Allan
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Hi Allan and Tangerine ,

    Thanks for the replies , I am ready to share but tell me how you want me to.

    This is a dom html table with data getting from database, I tried doing the data tables debug , it says uploading data to server but never ends.

    I have all the data loaded in the table but no sort , no search , no pagination is happening. I can see next and prev buttons but disabled.

    Instead of ten entries it shows all records. And for some reason only last row is highlighted to blue color.

    @ Tangerine : I am not getting any error in the browser error console , except this warning

    event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

    I want to share at least a screen shot but could not find any attachment option to this post.


    Thanks,
    Swathi.
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    I dont know if this helps , but this is from the error console of the browser

    submit.php
    debug.datatables.net/remote
    25 ms
    status.php?callback=jQuery17107438305462710559_1395087992070&unique=1395088064695&_=1395088076468
    debug.datatables.net/remote
    0
    status.php?callback=jQuery17107438305462710559_1395087992071&unique=1395088064695&_=1395088078722
    debug.datatables.net/remote
    107 ms1 ms
    status.php?callback=jQuery17107438305462710559_1395087992072&unique=1395088064695&_=1395088079336
    debug.datatables.net/remote
    0
    status.php?callback=jQuery17107438305462710559_1395087992073&unique=1395088064695&_=1395088080052
    debug.datatables.net/remote
    207 ms0
    status.php?callback=jQuery17107438305462710559_1395087992074&unique=1395088064695&_=1395088080762
    debug.datatables.net/remote
    272 ms0 ms
    771 requests ❘ 304 KB transferred
    HeadersPreviewResponseCookiesTiming
    Request URL:http://debug.datatables.net/remote/submit.php?
    Request Method:POST
    Status Code:200 OK
    Request Headersview source
    Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
    Accept-Encoding:gzip,deflate,sdch
    Accept-Language:en-US,en;q=0.8
    Cache-Control:max-age=0
    Connection:keep-alive
    Content-Length:10052611
    Content-Type:application/x-www-form-urlencoded
    Cookie:__cfduid=d1f31515d2ebfc06d9d206a60fe62d0481386896703330; Vanilla=74071-1397312658%7C383b81af592cea8fd210598acee6fa4c%7C1394720658%7C74071%7C1397312658; Vanilla-Volatile=74071-1395250018%7Ce3fd30b579c74cd7cf004db8bd57997d%7C1395077218%7C74071%7C1395250018; SpryPanel_site=81ed8be21549c9cbf4e2261bc444c5a4; VanillaSessionID=9c0b3dc1041aec9f201d76602c93689f; __utma=15923235.46589348.1394637215.1395081234.1395086627.8; __utmb=15923235.2.10.1395086627; __utmc=15923235; __utmz=15923235.1394755442.4.4.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided); __utma=120757021.1132346401.1394548989.1395069352.1395077222.26; __utmb=120757021.40.10.1395077222; __utmc=120757021; __utmz=120757021.1394993088.24.9.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)
    Host:debug.datatables.net
    Origin:http://127.0.0.1:8888
    Referer:http://127.0.0.1:8888/Finance_Dashboard_User_Page.html
    User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36
    Form Dataview sourceview URL encoded
    data:(unable to decode value)
    unique:1395088064695
    Response Headersview source
    Connection:close
    Content-Length:35
    Content-Type:text/html
    Date:Mon, 17 Mar 2014 20:27:56 GMT
    Server:Apache/2.4.6 (Unix) OpenSSL/0.9.8e-fips-rhel5 mod_bwlimited/1.4 PHP/5.3.27
    Vary:User-Agent
    X-Powered-By:PHP/5.3.27
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Hey Allan ,

    I tried debugging and now I can see this error .


    GET http://127.0.0.1:8888/null?sEcho=2&iColumns=28&sColumns=&iDisplayStart=0&iD…true&bSortable_25=true&bSortable_26=true&bSortable_27=true&_=1395155997136 404 (Not Found) jquery-1.8.2.min.js:2
    send jquery-1.8.2.min.js:2
    p.extend.ajax jquery-1.8.2.min.js:2
    j.defaults.fnServerData jquery.dataTables.min.js:132
    wa jquery.dataTables.min.js:46
    x jquery.dataTables.min.js:38
    K jquery.dataTables.min.js:52
    O jquery.dataTables.min.js:86
    e jquery.dataTables.min.js:87
    (anonymous function) jquery.dataTables.min.js:88
    (anonymous function) jquery.dataTables.min.js:94
    p.event.dispatch jquery-1.8.2.min.js:2
    g.handle.h

    Any idea where I am going wrong ?

    This is my code

    $.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
    {
    var aData = [];
    $( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
    aData.push( this.value );
    } );
    alert("aData in function "+iColumn +" "+aData);
    return aData;
    }

    $('#tableone').dataTable( {
    bServerSide: true,
    aoColumns: [

    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},

    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text"},

    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text" },

    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text" },
    { "sSortDataType": "dom-text"},
    { "sSortDataType": "dom-text" }

    ]

    });

    Thanks,
    Swathi.
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Hey Allan ,

    I am trying to apply data table on already constructed table which has columns with input fields. I did not understand if I had to use any of these parameters Ajaxresource and adata[] . Kindly help me to understand.

    Thanks,
    Swathi.
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    Looks like you'e enabled server-side processing, but not provided an Ajax data source ( sAjaxSource ).

    However, as I said before, and the forum rules very clearly state, please provide a test case. Without a test case, I cannot offer any further help with this issue.

    Allan
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Hi Allan ,

    Thanks for the reply , I am working on providing you a test case. In the mean time can you tell me if data tables can do sorting and pagination on a html table which is already populated with values. I have data on client side , DOM table with data.

    Thank you so much for your patience.

    -Swathi.
  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
    [quote] can you tell me if data tables can do sorting and pagination on a html table which is already populated with values.[/quote]
    Yes it can.
    http://datatables.net/release-datatables/examples/data_sources/dom.html
  • swathikuchiswathikuchi Posts: 22Questions: 0Answers: 0
    Hi Allan & Tangerine ,

    Finally I could run debug on my application , this is the link
    http://debug.datatables.net/apahiq . I actually have 28 columns with 500+ records on client side html table , I am not sure why it says only 1 record/row . And I think this is the reason why pagination and sorting is not happening. I hope you can help me now with this information.

    Thanks,
    Swathi.
  • allanallan Posts: 63,381Questions: 1Answers: 10,449 Site admin
    I don't know why it says 1 row only either, if you say it has 500+ records. Once again (and for the final time) we'd need a test case....
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.