Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/82.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Json到Jquery数据表_Javascript_Jquery_Json_Jquery Datatables - Fatal编程技术网

Javascript Json到Jquery数据表

Javascript Json到Jquery数据表,javascript,jquery,json,jquery-datatables,Javascript,Jquery,Json,Jquery Datatables,我一直试图在Jquery datatable上显示Json响应,但没有成功。基本上,一旦服务器返回Json响应,我希望它显示在表上。我检查了Json,它似乎是有效的Json响应 JSON响应 [ { "pk": 7, "model": "softwareapp.software", "fields": { "city": "miami", "submitted_by": [],

我一直试图在Jquery datatable上显示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>

$(文档).ready(函数(){
/*var kaboohAPI='{%url软件列表ajax%}'*/
jsondata=[];
$('#filterform')。关于('submit',函数(e){
e、 预防默认值();
var query=$('#filterform').serialize();
$.ajax({
类型:'GET',
url:“{%url软件列表ajax%}”,
数据类型:“json”,
数据:查询,
成功:功能(数据){
控制台日志(数据);
$('#示例')。数据表({
“aaData”:数据,
“AAA列”:[
{“mData”:“title”},
{“mData”:“开发者”}
],
});
}/*响应处理功能结束*/
});/*ajax函数结束*/
});
});

datatable函数不读取此JSON。JSON应该是一个数组或一个对象数组。因此,更好的方法是将数据附加到普通表中,然后初始化datatable,这样就可以正常工作了

请参阅以下资源:


    • Mavrossy以下是我在项目中使用它的方式

      Html


      有没有一种方法可以修改客户端的json响应,使其可被datatable读取!已将我的ajax源代码转换为对象数组,它正在工作:)
           <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" }               
      
              ]
          });
      }