使用返回的服务器参数显示数据

Question

我尝试使用 jQuery 数据表。在我使用引导表之前。 在服务器上，我使用spring boot，spring data with paging。

   <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>memberId</th>
                <th>name</th>
                <th>phone1</th>
                <th>phone2</th>
                <th>email</th>
            </tr>
        </thead>  
    </table>

$('#example').DataTable({
            "processing": "true",
            "serverSide": "true",
            "ajax": {
                "url": "/rest/members",
                "data": function (d) {
                    return {
                        search: d.search.value,
                        page: d.start,
                        size: d.length
                    }

                },
                dataFilter: function (data) {
                    var json = jQuery.parseJSON(data);
                    json.recordsTotal = json.totalElements;
                    json.data = json.content;
                    return JSON.stringify(json); // return JSON string
                }

            }
        });

使用服务器返回的值，我尝试显示数据。其实什么都没有显示

{  
   "content":[  
      {  
         "memberId":1,
         "name":"bob",
         "phone1": "450",
         "phone2": "1",
         "email": "test"
      },
      {  
         "memberId":2,
         "name":"robert"
         "phone1": "2323",
         "phone2": "2",
         "email": "test"
      }
   ],
   "last":true,
   "totalElements":27,
   "totalPages":1,
   "sort":null,
   "numberOfElements":27,
   "first":true,
   "size":100,
   "number":0
}

编辑

DataTables 警告：table id=example - 为第 0 行第 0 列请求未知参数“0”。有关此错误的详细信息，请参阅http://datatables.net/tn/4

Answer 1

几个问题

1. 示例 JSON 无效，您有尾随逗号

2. ajax数据回调调用dataSrc，而不是dataFilter

3. 不需要解析data，JSON已经是接受的dataType了

4. 将data 作为字符串返回到预期的数组会引发错误

5. 有效的回调可能看起来像这样

    dataSrc: function(data) {
       data.recordsTotal = data.totalElements;
       data.data = data.content;
       return data.data
    }

基于上述 JSON 的演示 -> http://jsfiddle.net/sx3py6fg/