如何在数据表中显示5行而不是默认的10行?

时间:2019-01-24 04:33:56

标签: javascript jquery datatable

我的数据表如下:

enter image description here

这里在单个页面中显示默认的10个数据。我需要显示58个条目中的1到5个,所以我尝试放置 max:5 ,但是不起作用。我只需要显示5个数据,用户就可以使用分页进行其他数据访问。

我用于数据表的代码是:

var table = $('#firstTable').DataTable({
        "processing" : true,
        "scrollY": 410,
        "scrollX": true,
        order: [ 0, 'asc' ],
        max :5,
        "ajax" : {
            "url" : A_PAGE_CONTEXT_PATH + "/form/api/getAllSelection/all",
            dataSrc : ''
        },
        "columns" : [ {
            "data" : "selectionId"
        }, {
            "data" : "selectionDate"
        }, {
            "data" : "selectedBy"
        }, {
            "data" : "eximPanNo"
        }, {
            "data" : "eximPanName"
        }, {
            "data" : "eximPanAddr"
        }, {
            "data" : "eximPanPhone"
        }, {
            "data" : "selectionType"
        } ]
    });

2 个答案:

答案 0 :(得分:2)

有一个名为pageLength的选项。您可以将其设置为仅显示5个条目。

 var table = $('#firstTable').DataTable({
    pageLength : 5,
    lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']]
  })

有关详细信息,请参见:https://datatables.net/forums/discussion/46346/how-to-show-less-than-10-rows

答案 1 :(得分:1)

您需要使用选项pageLength,如下所示:

var table = $('#firstTable').DataTable(
{
    "processing": true,
    "scrollY": 410,
    "scrollX": true,
    order: [ 0, 'asc' ],
    //max :5, WRONG OPTION!
    "pageLength": 5,
    "ajax" : {
        "url" : A_PAGE_CONTEXT_PATH + "/form/api/getAllSelection/all",
        dataSrc : ''
    },
    "columns" : [ {
        "data" : "selectionId"
    }, {
        "data" : "selectionDate"
    }, {
        "data" : "selectedBy"
    }, {
        "data" : "eximPanNo"
    }, {
        "data" : "eximPanName"
    }, {
        "data" : "eximPanAddr"
    }, {
        "data" : "eximPanPhone"
    }, {
        "data" : "selectionType"
    } ]
});