javascript - 数据表 - 从 AJAX 源过滤数据

Question

我有一个数据表，正在从 api 获取数据。现在我的状态是事件的，非事件的，如果标志是事件的，那么我需要在数据表中显示，否则我不应该显示过期的。这是我的 fiddle 。在这个 fiddle 中，我显示了事件和不活动两者。但我只想显示事件状态。

HTML

<table id="example" class="display" cellspacing="0" width="100%">
     <thead>
         <tr>
           <th>Name</th>
           <th>Email</th>
           <th>Subject</th>
           <th>Status</th>
           <th>Message</th>
           <th>Details</th>
         </tr>
        </thead>
 </table>

脚本:

$(document).ready(function() {
    $('#example').DataTable({
        "processing" : true,
        "ajax" : {
            "url" : "https://api.myjson.com/bins/12uwp2",
            dataSrc : ''
        },
        "columns" : [ {
            "data" : "name"
        }, {
            "data" : "email"
        }, {
            "data" : "subject"
        }, {
            "data" : "status"
        },{
            "data" : "message"
        },
        {
                "mData": "Details",
                "mRender": function (data, type, row) {
                    return "<a class='delete' data-id=" + row.id + " href='/Details/" + row.id + "'>Delete</a>";
                }
        }]
    });
    $(document).on("click", ".delete", function(e) {
        e.preventDefault()
        alert("Delete button clicked for Row number " + $(this).data("id"))
    })
});

如何做到这一点。谁能帮我怎么做。

Answer 1

用例是:操作从服务器返回的数据

$('#example').DataTable({
    "ajax" : {
        "url" : "https://api.myjson.com/bins/12uwp2",
        "dataSrc": function ( json ) {
            return json.filter(function(item){
                return item.status=="active";         
                });
         }
    }
});

关键是正确使用dataSrc进行数据操作。

As a function - As a function it takes a single parameter, the JSON returned from the server, which can be manipulated as required. The returned value from the function is what will be used by DataTables as the data source for the table.

我建议从 DataTable 初始化对象中删除 processing 属性，因为不再有繁重的处理步骤。

文档

• Load data for the table's content from an Ajax source - Examples
• Live Example - JSFiddle
• Clean code example using a separate filter function - JSFiddle