dropdown to control the number of items to be displayed per page

dropdown to control the number of items to be displayed per page

DimpleRoharaDimpleRohara Posts: 3Questions: 0Answers: 0
edited April 2013 in General
I want a dropdown to control the number of items to be displayed per page in a datatable. I tried using
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]] but its not working for me.
I am using ajax-jquery code to fetch the record in the datatable.

Replies

  • DimpleRoharaDimpleRohara Posts: 3Questions: 0Answers: 0
    function drawTable(){
    $.ajax({
    url: GET_DATA_ACTION(),
    dataType: "json",
    error:function(errorStatus) {
    if((errorStatus.status==200)||(errorStatus.status>=300)){
    //pleaseWait.dialog("close");
    }
    },
    success: function(TABLE_DATA) {

    // table configuration
    var table = $("#content_objects_table").dataTable({
    "bJQueryUI": true,
    "bDeferRender": true,
    "bDestroy" : true,
    "sScrollY": TABLE_SCROLL_HEIGHT + "px",
    "bScrollCollapse": true,
    "bPaginate": true,
    "sPaginationType": "full_numbers",
    "oSearch": {"sSearch": "", "bSmart": true},
    "bSortClasses": false,
    "aoColumns": [
    {"sTitle": TABLE_ID_COLUMN_NAME, "sType": "string", "bSearchable": false,"bVisible": false,"mData": "id"}, // id column
    {"sTitle": TABLE_TITLE_COLUMN_NAME, "sType": "string", "sWidth": TABLE_TITLE_COLUMN_WIDTH,"mData": "programName"} // name column
    ],
    "aaSorting": [[2, "desc"]],
    "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    "aaData":TABLE_DATA,
    "oLanguage": {
    "sEmptyTable": TABLE_NO_DATA_MESSAGE,
    "sLengthMenu": "Display _MENU_ records per page",
    "sSearch": ""
    },
    "fnDrawCallback": function () {
    drawContextMenu();
    $("#content_objects_table_length").hide();
    //$("#content_objects_table_length").find("label").css({"color":"white"});
    }
    });
    $("#content_objects_table_wrapper").css("min-height", "0px");

    $("#content_objects_table_filter").prepend(
    $("").attr({
    "class": "ui-icon-search-object"
    }).css({
    "float": "left",
    "position": "relative",
    "top": "1px",
    "left": "-5px"
    })
    ).css({width: "auto"});
    $("#loadingHome").hide();
    }});
    }
  • DimpleRoharaDimpleRohara Posts: 3Questions: 0Answers: 0
    I am using data-tables-1.9.4.js. Do i need to download some other js to use this function?
  • allanallan Posts: 63,522Questions: 1Answers: 10,473 Site admin
    You need to link us to a test case so we can see what is going wrong, debug it and fix it: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read .

    The code above looks like it should work to me.

    Allan
This discussion has been closed.