Question

我很新鲜，但是我正在像你这样的人的帮助下学习：)。我需要在我的网站上做一个表格，该表格将按类型和分页显示排序的数据。我认为可以使用以下解决方案：https://legacy.datatables.net/examples/data_sources/server_side.html

但是说实话，我不知道该怎么做。有人可以举一个与html一起的示例吗？还是建议其他解决方案？

Answer 1

首先，您需要导入一些必要的文件：

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

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

数据表-按分页排序

1 个答案: