使用我的json数据填充JQuery DataTable

我建议使用JQuery数据表。 现在我需要使用从我的控制器发送的一堆json对象来填充网格。 如何从js在网格上发送此数据

$.ajax({ ... url: '/Home/ReturnJsonData', success: function (result) { $.each(result, function (i, item) { // this is where I should sent item object to my grid }); }, error: function () { alert("error"); } }); 

更新我发现了这些链接 ，但我不知道如何实现它。

Answer 1

您应该使用JQuery DataTable sAjaxSource属性来指定ajaxsource，它将是/ HomeReturnJsonData

举个例子

 $(document).ready(function () { $('#myDataTable').dataTable({ "bServerSide": true, "sAjaxSource": "Home/ReturnJsonData", "bProcessing": true, "aoColumns": [ { "sName": "ID", "bSearchable": false, "bSortable": false, "fnRender": function (oObj) { return 'View'; } }, { "sName": "COMPANY_NAME" }, { "sName": "ADDRESS" }, { "sName": "TOWN" } ] }); }); 

Answer 2

在这种情况下，您可以使用Jquery Grid Plugin 。

阅读本文以使用MVC数据网格：使用jqGrid和JSON

http://blog.davidrenz.com/?p=663

更新：

在这种情况下，如果您只想使用J-query Datatable，请转到此链接。

http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part

Answer 3

我把它放在一个函数中，因为这是我最简单的方法，随意复制函数并使用它。 您需要更改的是url和列名称以及数字。 要调用它只是复制带有完成路径的html，以便它们匹配你的任何东西。

 function SetUpGrid(tableID, pagerID, data) { $("#" + tableID).jqGrid({ url: '/pagename/stuff?data=' + data, datatype: 'json', mtype: 'GET', colNames: ['col name1', 'col name2', ... 'col nameN'], colModel: [ { name: 'colName1', index: 'colName1', align: "center", sortable: true, editable: false, resizable: false }, { name: 'colName2', index: 'colName2', align: "center", sortable: true, editable: false, resizable: false }, ... { name: 'colNameN', index: 'colNameN', align: "center", sortable: true, editable: false, resizable: false } ], pager: '#' + pagerID, autowidth: true, viewrecords: true, rowNum: 15, pgbuttons: true, pginput: false, pgtext: "Page {0} of {1}", recordtext: "Data {0} - {1} of {2}", emptyrecords: "No data to display", loadui: true, rowList: [15, 30, 60], scrollrows: true, hidegrid: true, sortorder: "desc", beforeRequest: function () { // This just inserts a loading image, you don't need it but I was loading a lot of data and wanted the user to know something was happening. $("#" + tableID).empty().append(''); }, loadComplete: function (data) { /* Called when the json load is done, this is a way to insert the data the way I want to. Feel free to use whatever you want like links or 
s or 
s or whatever. */ if (data.length > 1) { for (var key in data) { if (data.hasOwnProperty(key)) { $("#" + tableID).empty().append("" + data[key].colName1 + "" + data[key].colName12+ " ... " + data[key].colNameN + ""); } } } else { $("#" + tableID).empty().append("" + this.colName1 + "" + this.colName2 + " ... " + this.colNameN + ""); } }, loadError: function (xhr, status, error) { // Called when an error occurs, handle as you wish, if you even do. alert(xhr); alert(status); alert(error); } }); $("#" + tableID).jqGrid("navGrid", "#" + pagerID, { add: false, edit: false, refresh: false, del: false, search: false }).trigger("reloadGrid", [{ page: 1 }]); }          
 

Answer 4

您还可以使用fnAddData属性将json推送到表。 查看这篇文章https://jqueryajaxphp.com/jquery-datatable-using-json/