Json 到 Jquery 数据表答案

【问题标题】：Json to Jquery DataTableJson 到 Jquery 数据表
【发布时间】：2013-12-20 05:08:49
【问题描述】：

我一直试图在 Jquery 数据表上显示 Json 响应，但没有成功。基本上，一旦服务器返回 Json 响应，我希望它显示在表格上。我检查了 Json，它似乎是有效的 Json 响应。

JSON 响应

[
    {
        "pk": 7,
        "model": "softwareapp.software",
        "fields": {
            "city": "miami",
            "submitted_by": [],
            "description": "test",
            "title": "test",
            "zipcode": "test",
            "rating_votes": 0,
            "state": "fl",
            "address": "test",
            "rating_score": 0,
            "business_size": [
                5
            ],
            "slug": "test",
            "developer": "test"
        }
    },
    {
        "pk": 8,
        "model": "softwareapp.software",
        "fields": {
            "city": "",
            "submitted_by": [],
            "description": "",
            "title": "test2",
            "zipcode": "",
            "rating_votes": 0,
            "state": "",
            "address": "",
            "rating_score": 0,
            "business_size": [
                5
            ],
            "slug": "test2",
            "developer": ""
        }
    },
    {
        "pk": 10,
        "model": "softwareapp.software",
        "fields": {
            "city": "",
            "submitted_by": [],
            "description": "",
            "title": "test3",
            "zipcode": "",
            "rating_votes": 0,
            "state": "",
            "address": "",
            "rating_score": 0,
            "business_size": [
                6
            ],
            "slug": "test3",
            "developer": ""
        }
    }
]

这里是 Jquery 函数。

<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<script>
$(document).ready(function() {

  /*var kaboohAPI = '{% url software-list-ajax %}';*/
  jsondata = [];
  $('#filterform').on('submit',function(e){
    e.preventDefault();
    var query = $('#filterform').serialize();
        $.ajax({
                type:'GET',
                url: '{% url software-list-ajax %}',
                datatype: 'json',
                data: query,
                success: function(data){
                 console.log(data);
                   $('#example').dataTable({
                            'aaData': data,
                            "aaColumns":[
                                {"mData":"title"},
                                {"mData":"developer"}
                            ],

                        });
                }/* response processing function ends */
            });/* ajax function ends */



        });
});
</script>

【问题讨论】：

标签： javascript jquery json jquery-datatables

【解决方案1】：

数据表函数不读取此 JSON。您的 JSON 应该是数组数组或对象数组。所以更好的方法是将数据追加到普通表中，然后初始化数据表，它会正常工作。

参考这些资源：

【讨论】：

有没有办法在客户端修改json响应，以便数据表可以读取？
看准了！将我的 ajax 源转换为对象数组，它正在工作:)

【解决方案2】：

mavroscy 这是我在项目中使用它的方式。

HTML

     <div style="width: 100%;">
            <div class="table-responsive">
                 <table id="exampleMy" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0">
                        <thead>
                            <tr>
                               <th>Name</th>
                               <th>dob</th>
                               <th>gender</th>
                               <th>mobile</th>
                               <th>email</th>
                             </tr>
                         </thead>
                         <tbody></tbody>
                 </table>
             </div>
        </div>

<link href="~/Scripts/DataTables/DataTables1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="~/Scripts/DataTables/Responsive-2.2.1/css/responsive.dataTables.min.css" rel="stylesheet" />

<script src="~/Scripts/DataTables/DataTables1.10.16/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/Responsive-2.2.1/js/dataTables.responsive.min.js"></script>

function DataList(ReqID) {

    $(document).ready(function () {
    getData();

})

  var getData() = function () {

    $.ajax({
        url: '/Controller/Action/',
        data: "{ 'prefix': '" + ReqID + "'}",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        success: function (response) {

            BindDataTable(response);

        }

    })

}

 var BindDataTable = function (response) {

    $("#exampleMy").DataTable({
        "responsive": true,
        "aaData": response,
        "aoColumns": [

            { "mData": "name" },
            { "mData": "dob" },
            { "mData": "gender" },
            { "mData": "mobile" },
            { "mData": "email" }               

        ]
    });
}

【讨论】：