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

dataTables shows all rows by default

dataTables shows all rows by default

ahsan_cse2004ahsan_cse2004 Posts: 13Questions: 0Answers: 0
edited September 2010 in Bug reports
Hi,
I am using dataTables with following settings.

[code]
$('#publisherListTable').dataTable({
"aLengthMenu": [
[1, 2, -1],
[1, 2, "All"]
]
});
[/code]

On reload of my page, I expected it to first show me only one row but it shows me all 3 rows. However drop down still shows 1 as the default selected value. When I change the value to something else it works fine and also if I go back to 1, now it shows me 1 row correctly.

I am following the example of file /examples/advanced_init/length_menu.html which comes with http://datatables.net/releases/DataTables-1.7.1.zip

I am in a fix to know what I am doing wrong as it is showing all table rows by default in every page reload, but works afterwards if I change the drop down values.

Thanks
Ahsan

Replies

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    Hi Ahsan,

    What browser are you using? I've just tried this and it seems to be working as expected for me. Safari 5 and Firefox 3.6.

    Allan
  • ahsan_cse2004ahsan_cse2004 Posts: 13Questions: 0Answers: 0
    edited September 2010
    I tried this on Firefox 3.6.8, Chrome 7.0 and IE 8.
    I am using jQuery 1.4.2. Only thing changed from sample example is that I am using my own css files. But I dont think that should matter.

    Thanks
    Ahsan
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    Can you link us to an example showing the issue please? I still can't seem to reproduce it with the above code.

    Allan
  • ahsan_cse2004ahsan_cse2004 Posts: 13Questions: 0Answers: 0
    I am unable to attach the code. Hence I am copying the code here. Sorry for formatting issues.
    publisher.js
    [code]
    $(document).ready(function() {
    $('#publisherListTable').dataTable({
    "aLengthMenu": [
    [1, 2, -1],
    [1, 2, "All"]
    ]
    });
    });
    [/code]

    dataTable.html
    [code]


    DataTables Example




    body {
    font-size: 70.0%;
    }

    div#boxes table, div#publisherModalDiv table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
    }

    div#boxes table td, div#boxes table th, div#publisherModalDiv table td {
    border: 1px solid #eee;
    padding: .4em;
    text-align: left;
    }

    .dataTables_wrapper {
    clear: both;
    margin: 0 0 30px;
    position: relative;
    }

    .dataTables_length {
    float: left;
    width: 40%;
    }

    .dataTables_filter {
    text-align: right;
    }

    .dataTables_info {
    float: left;
    width: 60%;
    }

    .dataTables_paginate {
    float: right;
    text-align: right;
    width: 44px;
    }

    .sorting {
    background: url("images/sort_both.png") no-repeat scroll right center transparent;
    }

    .sorting_asc {
    background: url("images/sort_asc.png") no-repeat scroll right center transparent;
    }

    .sorting_desc {
    background: url("images/sort_desc.png") no-repeat scroll right center transparent;
    }

    .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
    float: left;
    height: 19px;
    margin-left: 3px;
    width: 19px;
    }

    .paginate_disabled_previous {
    background-image: url("images/back_disabled.jpg");
    }

    .paginate_enabled_previous {
    background-image: url("images/back_enabled.jpg");
    }

    .paginate_disabled_next {
    background-image: url("images/forward_disabled.jpg");
    }

    .paginate_enabled_next {
    background-image: url("images/forward_enabled.jpg");
    }








    ID
    Name
    Description
    Email
    Vertical



    1
    INSURANCE Publisher

    insurance.publisher@webshrub.com
    INSURANCE


    2
    FINANCE Publisher

    finance.publisher@webshrub.com
    FINANCE


    3
    test

    ahsan_cse2004@yahoo.com
    INSURANCE






    [/code]
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    You need to add a TBODY tag for your table's body: http://datatables.net/usage/#prerequisites .

    That might make all the difference. I don't see anything else wrong with it... :-)

    Allan
  • ahsan_cse2004ahsan_cse2004 Posts: 13Questions: 0Answers: 0
    Thanks Allan,
    Sorry I posted code which was not complete and I copied it incorrectly from firebug. However I have it as follows

    [code]



    ID
    Name
    Description
    Email
    Vertical
    Edit





    ${publisher.id}
    ${publisher.name}
    ${publisher.description}
    ${publisher.email}
    ${publisher.vertical.name}









    [/code]

    As you can see it actually contains tbody, so that should not be any issue.
    One more thing, can we pass any other format of JSON for making AJAX based dataTables.
    Is the JSON format specified in http://datatables.net/usage/server-side is hard bound for working of ajax based dataTables

    Thanks
    Ahsan
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    Okay - in that case I'm stuck I'm afraid! Are you getting any Javascript errors in Firebug or anything? Does this happen in all browsers?

    Regarding the formatting - yes it is hardcoded as a 2D string array, however, you can use fnServerData to alter the formatting of a JSON object to a DataTables suitable object. For example: http://datatables.net/plug-ins/server-data-formats

    Allan
  • ahsan_cse2004ahsan_cse2004 Posts: 13Questions: 0Answers: 0
    edited September 2010
    Yes I am getting this error in all browsers.
    Also, I am getting this jquery error that does not seem to be specific to this problem.
    module\xC2 is not defined
    http://localhost:8080/app/resources/js/jquery/jquery-ui-1.8.4.custom/development-bundle/ui/jquery.ui.core.js
    Line 27

    Even after this error I dont seem to get any issues related to jquery.

    Thanks for the link, I will try that.
    Ahsan
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    Ah - I've no idea in that I'm afraid! DataTables doesn't use jQuery UI core, but something else on your page much be, and it's causing the JS error. I'd imagine if you can stop that error occurring then DataTables will work just fine.

    Allan
  • ahsan_cse2004ahsan_cse2004 Posts: 13Questions: 0Answers: 0
    Allan,
    Hi, I fixed all the jquery issues (http://dev.jqueryui.com/ticket/5921 and http://dev.jqueryui.com/ticket/5917).
    Now my jquery is not showing me any errors, even after that I am not able to run it properly.

    Thanks
    Ahsan
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    Can you give us a link to a working example please?

    Allan
  • ahsan_cse2004ahsan_cse2004 Posts: 13Questions: 0Answers: 0
    edited September 2010
    Sorry, I dont get you. You want me to attach the code. Unfortunately I dont see any attachment button on this forum
    The code is there with you since I already posted it above.

    However right now I am trying to make datatables work with AJAX output. Even that does not seem to work
    [code]
    $(document).ready(function() {
    $('#publisherListTable').dataTable({
    "aLengthMenu": [
    [1, 2, -1],
    [1, 2, "All"]
    ],
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "list.htm",
    "fnServerData": function (sSource, aoData, fnCallback) {
    $.ajax({
    "dataType": 'json',
    "type": "POST",
    "url": sSource,
    "data": aoData,
    "success": function fnCallback(json) {
    $('#publisherListTable').dataTable().fnAddData(
    [
    json.id,json.name,json.description,json.email,json.vertical,json.edit
    ]);
    },
    error: function () {
    alert("Error occured while fetching list of publishers!!!");
    }
    });
    }
    });
    [/code]
    Inside fnCallback I am adding rows to the dataTable but they dont seem to work. Basically I have my own custom json and want to populate it to datatables. I dont see any example that does this thing.

    Thanks.
    Ahsan
  • ahsan_cse2004ahsan_cse2004 Posts: 13Questions: 0Answers: 0
    I resolved AJAX call issue like this.

    [code]
    $('#publisherListTable').dataTable({
    "aLengthMenu": [
    [1, 2, -1],
    [1, 2, "All"]
    ],
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "list.htm",
    "fnServerData": function (sSource, aoData, fnCallback) {
    $.ajax({
    "dataType": "json",
    "type": "POST",
    "url": sSource,
    "data": aoData,
    "success": function(json) {
    var sEcho = json.sEcho;
    var iTotalRecords = json.iTotalRecords;
    var iTotalDisplayRecords = json.iTotalDisplayRecords;
    var aaData = [];
    $(json.publisherList).each(function () {
    aaData.push([this.id, this.name, this.description, this.email, this.vertical.name, this]);
    });
    var newJsonObject = {
    "sEcho":sEcho,
    "iTotalRecords":iTotalRecords,
    "iTotalDisplayRecords":iTotalDisplayRecords,
    "aaData":aaData
    };
    fnCallback(newJsonObject);
    },
    "error":function() {
    alert("Error occurred while fetching list of publishers.");
    }
    });
    }
    });
    [/code]
    However drop down issue still remains :(
  • ahsan_cse2004ahsan_cse2004 Posts: 13Questions: 0Answers: 0
    edited September 2010
    Hi,
    One observation, I got about dropdown issue.
    While analyzing it in FireBug, i saw that despite setting the values as
    "aLengthMenu": [[1, 2, -1], [1, 2, "All"]]

    It sends the value to the server as
    iDisplayLength 10
    iDisplayStart 0

    So this behavior is correct that it shows all 3 rows since 3 < 10.

    Now the real problem is to find why it is not able to set the values defined in aLenghtMenu. Also 10 is set only when page is reloaded. After wards it is working fine when I change the values as mentioned my first post.

    Any comments?

    Thanks
    Ahsan
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    Doh! Sorry I should have clocked that earlier! You need to set the initialise display length if you want it anything other than the default 10: http://datatables.net/usage/options#iDisplayLength

    Allan
  • ahsan_cse2004ahsan_cse2004 Posts: 13Questions: 0Answers: 0
    Yeah Thanks a ton Allan.
    I adore you for the generosity you have shown to me.

    Ahsan
  • bikabika Posts: 25Questions: 0Answers: 0
    Hi all,

    I'm initializing display length "iDisplayLength" to show all records at first load, I also have the "aLengthMenu" defined as
    [code]aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]][/code]

    how can I get the drop-down to pre-select the "All" option at first load

    thanks
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    Setting iDisplayLength to -1 should do the trick.

    Allan
  • bikabika Posts: 25Questions: 0Answers: 0
    Works fine.

    Thanks Allan
  • starwebstarweb Posts: 2Questions: 0Answers: 0
    I am running into the same problem. The initial display of the page shows every record when it should show only 10. If I choose the default 10 from the drop down, it works. However, it never works on initial load of the page. Initial load always shows every record.

    Here is my code:
    [code]$(document).ready(function() {
    $('#example').dataTable({
    "iDisplayLength": 10,
    "aaSorting": [[2,"DESC" ]]
    });
    } );[/code]

    My debug output is here. http://debug.datatables.net/epegez

    Thanks,
    PK
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    > "aaSorting": [[2,"DESC" ]]

    I suspect that this is causing a Javascript error as the sort direction is case sensitive. Try:

    [code]
    "aaSorting": [[2,"desc" ]]
    [/code]

    Allan
  • thealythealy Posts: 2Questions: 0Answers: 0
    I found this thread searching for a solution to the same issue. My code is below, and despite re-deploy of app, clearing browser cache (FireFox and Chrome), it still displays the defaults. Any suggestions?

    [code]
    $('#flow_table').dataTable( {
    "iDisplayLength": 20,
    "aLengthMenu": [
    [20, 100, 1000, -1],
    [20, 100, 1000, "All"]
    ],
    "aoColumns" : [
    { sWidth: '60px' },
    { sWidth: '110px' },
    { sWidth: '110px' },
    { sWidth: '110px' },
    { sWidth: '40px' },
    { sWidth: '60px' },
    { sWidth: '60px' },
    { sWidth: '60px' },
    { sWidth: '100px' },
    { sWidth: '40px' }
    ],
    "bProcessing": true,
    "sAjaxSource": "/TW/TwServlet?
    [/code]
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    edited November 2012
    > Any suggestions?

    Yes - link us to the page so we can see what is wrong with it :-)

    Allan
  • thealythealy Posts: 2Questions: 0Answers: 0
    That was very helpful - thank you so much.
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    Not sure how we can do anything else. You've not provided us with a link to the page or a debugger trace, and there is nothing wrong with the code above. So we'd need to see the page to even stand a chance of being able to help.
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.