无法使用来自json的数据来获取dataTable来加载表

时间:2017-07-26 13:49:56

标签: jquery json datatable

我使用ajax调用从我的服务器检索JSON信息:

console.log('GOT IT');
/* attach a submit handler to the form */
$('#search-form').submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=''> element */
  var form = $(this),
    url = form.attr('action');


  var data = $('form#search-form').serialize()

  /* Send the data using post with element id name and name2*/
  var posting = $.post(url, data, datype = 'json');

  /* Alerts the results */
  posting.done(function(data) {
    $('#results-table').dataTable({
      ajax: data
    });
  });
});

数据本身是以这种格式从我的服务器返回的JSON字符串:

{
    "success":true,
    "result":[{"salutationtype":"Ms.","firstname":"Jennifer","contact_no":"CON1","phone":"","lastname":"Gale"
}

我想我可能需要将dataSrc更改为&#39;结果&#39;但那并没有奏效。我还尝试使用$.jsonParse()JSON.parse()解析JSON,并将其作为对象而不是JSON字符串提供给dataTables,但都没有效果。

2 个答案:

答案 0 :(得分:0)

尝试以下解决方案。这只是一个例子。

$('#results-table').dataTable({
                        "bFilter": false,
                        "bRetrieve": false,
                        "bSortClasses": false,
                        "bLengthChange": true,
                        "bPaginate": true,
                        "bAutoWidth": true,
                        "aaSorting": [],
                        "aaData": data,
                        pagingType: "full_numbers", 
                        scrollCollapse: false,
                        "sScrollX": true,
                        "autoWidth": true,
                        bAutoWidth: false,
                        responsive: true,
                        stateSave: true,
                        sDom: 'R<"data-table-wrapper"rt><"bottomside"ilp>',
                        "drawCallback": function(settings) {
                        },
                        "aoColumns": [
                            {
                                "sTitle": '<input type="checkbox" class="radio_select hathi">',
                                "mData": null,
                                "bSortable": false,
                                "render": function(obj) {
                                    return '<input name="outcomes_chk" id="checkbox_class" type="checkbox" value="' + obj.id + '" class="radio_select madaniyu ">'
                                }
                            },
                            {
                                "sTitle": "Name",
                                "mData": null,
                                "render": function(obj) {
                                    return '<input type="text" data-name="name[]" class="required  form-control input-sm font-body-size readonly transparent edit no-border" value="' + obj.name + '" >'
                                }

                            }
                        ]
                    });

aoColumns放置您的专栏。

答案 1 :(得分:0)

我建议您更改以下行

var data = $('form#search-form').serialize()

var formdata = $('form#search-form').serialize();
/* Send the data using post with element id name and name2*/
var posting = $.post(url, formdata, datype = 'json');

您的变量名称是数据,您的参数名称也是数据,并且同一行中有缺少分号;