最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to show 5 rows instead of default 10 rows in datatable? - Stack Overflow

programmeradmin3浏览0评论

My datatable looks like this:

Here it is showing default 10 datas in a single page.I need to show 1 to 5 of 58 entries so i tried to put max:5 but it is not working.I need to show only 5 data and the user may use pagination for other data access.

My code for datatable is:

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"
        } ]
    });

My datatable looks like this:

Here it is showing default 10 datas in a single page.I need to show 1 to 5 of 58 entries so i tried to put max:5 but it is not working.I need to show only 5 data and the user may use pagination for other data access.

My code for datatable is:

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"
        } ]
    });
Share Improve this question edited Jan 24, 2019 at 4:41 ashwin karki asked Jan 24, 2019 at 4:33 ashwin karkiashwin karki 6735 gold badges21 silver badges37 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 14

There is a option called pageLength. You can set this for show only 5 entries.

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

For details see : https://datatables.net/forums/discussion/46346/how-to-show-less-than-10-rows

You need to use option pageLength, like this:

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"
    } ]
});
发布评论

评论列表(0)

  1. 暂无评论