数据表-排序和分页

xdyibdwo  于 2021-06-21  发布在  Mysql
关注(0)|答案(1)|浏览(370)

我很新鲜,但我在像你这样的人的帮助下学习:)。我需要在我的网站上做一个表,将显示按类型和分页排序的数据。我想用这个方法:https://legacy.datatables.net/examples/data_sources/server_side.html
但老实说,我不知道该怎么做。有人能给一个例子连同html如何做到这一点?或者提出不同的解决方案?

oalqel3c

oalqel3c1#

首先,您需要导入一些必要的文件:

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

css格式:

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">

然后使用已创建表的id属性,使用以下代码:

var table = $('#myTable').DataTable(); // this creates a table object of the DataTable class
// myTable is the id of the table you have created
table.clear().draw();
table.destroy();

$.ajax({
    url: 'abc.php',
    type: 'POST',
    data: {value:value},//value you want to send to backend
    dataType: 'json',

    success:function(result){
        $('#myTable').DataTable( {
            "pageLength": 10, // does pagination providing 10 records per page
            "destroy": true,
            "language": {
                    "zeroRecords": "No Data Found",
                    "infoEmpty": "No Data Found",
                },
        "ajax": "objects.txt",
        // Data from backend is sent to objects.txt file in JSON format
            "columns": [
                { "data": "Key value from backend for 1st column in table" },
                { "data": "Key value from backend for 2nd column in table" },
                { "data": "Key value from backend for 3rd column in table" },
                { "data": "Key value from backend for 4th column in table"},
                { "data": "Key value from backend for 5th column in table" },
                { "data": "Key value from backend for 6th column in table" }
            ]
        });
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
        alert("responseText: "+xhr.responseText);
    }
});

您可以导入更多的datatablejavascripts,这些脚本可以提供更多功能,例如将表数据转换为pdf或使用按钮datatablejavascripts导出为excel文件。您可以在此处找到更多相关信息:https://cdn.datatables.net/

相关问题