数据表-过滤来自AJAX源的数据

时间:2019-03-05 10:11:02

标签: javascript jquery html datatables

我有一个数据表,正在从api中获取数据。现在我的状态为active,如果该标志处于活动状态,则处于非活动状态,那么我需要在数据表中显示,否则我不应该显示已过期的状态。这是我的a bug in the connector module。在这个小提琴中,显示了活跃和不活跃两者。但我只想显示活动状态。

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

如何执行此操作。谁能帮我怎么做。

1 个答案:

答案 0 :(得分:3)

用例是:处理从服务器返回的数据

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

关键是要正确使用dataSrc进行数据处理。

  

作为函数-作为函数,它需要一个参数JSON   从服务器返回,可以根据需要进行操作。的   该函数返回的值是DataTables将使用的值   表的数据源。

由于不再需要繁重的处理步骤,因此我建议从DataTable初始化对象中删除processing属性。

文档