Question

我正在获取以下格式的数据在表中，我必须保留三个标题，如WoNo，WOType，WOStatusDescription

{WoNo: "98653210", WOType: "AWO", WOStatusDescription: "Closed"}

{WoNo: "930235", WOType: "AWO", WOStatusDescription: "Yet To Start"}

{WoNo: "987898", WOType: "AWO", WOStatusDescription: "Work In Progress"}

我也可以得到

{WoN

o: "98653210",WOStatusDescription: "Closed"}

{WoNo: "930235", WOStatusDescription: "Yet To Start"}

{WoNo: "987898", WOStatusDescription: "Yet To Start"}

在表中，我必须保留两个标题，如WoNo，WOStatusDescription。

这里的标题不固定，当表头的数量不固定时我要绑定数据

这是我的html代码

<div>
    <table class="table table-striped table-bordered" id="customSearch"> 
    </table>
</div>

下面是我的js

    var WOValue = [];
    // var options = '';
    var tableBody = "";
    var columns = [];

    customSearch = $("#customSearch").dataTable({
        "iDisplayLength": 10,
        "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
        "bPaginate": true,
        "bFilter": true,
        "bJQueryUI": true,
        "bSearchable": true,
        "bLengthChange": true,
        "bInfo": true,
        "pagingType": "full_numbers",
        "paging": true,
        "lengthMenu": [10, 25, 50, 75, 100],
        "aaSorting": [],
        // "dom": "Bfrtip",

        "ajax": {
            "url": P3Server + 'CustomSearch/searchdata',
            "type": 'POST',
            data: { "filterData": filterData },
            "dataSrc": function (data) {
                tableBody = tableBody + "<tr>";
                for (var prop in data.LabelData[0]) {

                    if (data.LabelData[0].hasOwnProperty(prop)) {
                        // Append properties such as email, fname, lname etc.
                        tableBody = tableBody + ("<th>" + prop + "</th>");
                        // Also keep a list of columns, that can be used later to get column values from the 'data' object.
                        columns.push(prop);
                    }
                }

                tableBody = tableBody + "</tr>";
                var iColumns = $('#customSearch thead td').length;

                // Create the data rows.
                if (data.LabelData.length > 0) {
                    data.LabelData.forEach(function (row) {
                        // Create a new row in the table for every element in the data array.
                        tableBody = tableBody + "<tr>";
                        columns.forEach(function (cell) {
                            // Cell is the property name of every column.
                            // row[cell] gives us the value of that cell.
                            tableBody = tableBody + "<td>" + row[cell] + "</td>";
                        });
                        tableBody = tableBody + "</tr>";
                    });
                    $("#customSearch").append(tableBody);
                }
            }
        },
        fixedHeader: {
            header: true,
            footer: true
        }


    })

数据具有约束力，但分页和搜索无法正常进行。我还想提供该数据的链接，以便在表中找到标题作为。

Answer 1

如果您真的想使用数据表ajax进行数据表分页

您将需要返回json格式数据的函数。
数据表具有强大的搜索功能，因此您不需要使用ajax的自定义搜索功能
在此处阅读完整的文档。 https://datatables.net/manual/ajax

下面的示例代码

$('#myTable').DataTable( {
   ajax: ...,
   columns: [
       { data: 'name' },
   ]
} );

如何做分页和搜索表？

1 个答案: