如何在DataTables中使用ajax返回的json数据，并在每一行中都有一个表单

我想在我的JQuery DataTables中使用ajax返回的数据。 我创建了循环来查看每一行，还需要为它们添加一个视图按钮。 我将所有数据传递给JQuery DataTables 。 我无法理解如何做到这一点。

这是我的ajax请求

   $(document).ready(function () { $("#searchArea").show(); var uID = $("#userName").val(); var tableProduct = $('#dataTbl').DataTable({ "bSort": false , "oLanguage": {"sZeroRecords": "", "sEmptyTable": ""} }); $.ajax({ type: 'GET', url: '${pageContext.request.contextPath}/restservice/viewApplication/' + uID, success: function (result) { var jString = JSON.stringify(result); var jdata = JSON.parse(jString); for (var x = 0; x < jdata.length; x++) { var td1 = jdata[x].snumber; var td2 = jdata[x].date; var td3 = jdata[x].slsNo + " in " + jdata[x].slsiUnit; var td4 = jdata[x].productDesc; var td5 = jdata[x].status; var td6 = "view btn1"; var td7 = "view btn2"; var td8 = "view btn3"; tableProduct.row.add([td1, td2, td3, td4, td5, td6, td7, td8]).draw(true); } } }); });  

我想为每一行添加此代码。 我怎样才能做到这一点 ？

Answer 1

在DataTables中使用Ajax数据

DataTables中有一个方便的function，用于从ajax获取数据并在配置表时使用它们。 只需使用ajax选项并告诉您要使用的数据源

 $('#dataList').DataTable({ ajax: { url: 'url', type: 'GET', dataSrc: '' } } 

有关完整指南，请参阅此文档 。

注意：这里将dataSrc选项传递为空告诉dataTable期望一个数组而不是来自ajax响应的对象

以下示例描述了一个senario，其中数据表配置为使用api响应。 出于恶魔目的，我使用了返回json数组的公共虚拟api服务。 看到这个虚拟api响应。

 $(function() { var columnArray = [{ title: "Photo ID", data: "id", targets: 0 }, { title: "Photo Title", data: "title", targets: 1 } ]; $('#dataList').DataTable({ ajax: { url: 'https://jsonplaceholder.typicode.com/photos', type: 'GET', dataSrc: '' }, bBootstrapLayout: true, columns: columnArray, columnDefs: [{ render: function(data, type, row) { return data + ' (' + row['albumId'] + ')'; }, targets: 0 }, { render: function(data, type, row) { var html = 'view'; return html; }, targets: 2 }] }); });