时间戳

首页 > 解决方案 > 如何在数据表 jquery 中进行如下图所示的分页设计

html - 如何在数据表 jquery 中进行如下图所示的分页设计

问题描述

我想使用数据表 Jquery 像这张图片一样进行分页。请帮我做这个。

图片

这是我的代码：

 $("#tblComplex").DataTable({
        "destroy": true,
        "serverSide": true,
        "bRetrieve": true,
        "searching": false,
        "order": [0, "asc"],
        "pagingType": "simple",
        "dom": '<"wrapper"tilp>',
        "language": {
            "paginate": {
                "next": '<span><img src="images/next.svg" alt="next-arrow" /></span>',
                "previous": '<span><img src="images/previous.svg" alt="prev-arrow" /></span>'
            }
        },
        //"pageLength": 5,
        //"lengthMenu": [[5, 10, 20, -1], [5, 10, 20, 'Show All']],
        "ajax": {
            "url": "/Complex/GetComplexList",
            "type": "Post",
            "datatype": "json",
            "dataSrc": "complexListData"
        },
        "columns": [
            { "title": "Id", "data": "id", "orderable": true, "visible": false },
            {
                "title": "Name", "data": "name", "orderable": true, "visible": true },
            { "title": "Address", "data": "address", "orderable": true, "visible": true }
            
        ]
    });

标签： htmljquerydatatablepagination

解决方案

我找到了解决方案。

我们只需要添加 CSS 的类名。例如：

第 1 页，第 10 页

我们必须在 dom 中定义它

"dom": '<"class1"<"class2"i>>

推荐阅读