Javascript 用我的 json 数据填充 JQuery DataTable
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12384053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate JQuery DataTable with my json data
提问by panjo
I'm suggested to use JQuery data table. Now I need to populate grid with bunch of json objects sent from my controller. How can I send this data on the grid from js
我建议使用 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"); }
});
UpdateI've found these link, but I dont know how to implement it.
更新我找到了这些链接，但我不知道如何实现它。
采纳答案by BobRock
You should use JQuery DataTable sAjaxSource property to specify ajaxsource in your case it would be /HomeReturnJsonData
您应该使用 JQuery DataTable sAjaxSource 属性在您的情况下指定 ajaxsource，它将是 /HomeReturnJsonData
An example follow
一个例子如下
$(document).ready(function () {
$('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "Home/ReturnJsonData",
"bProcessing": true,
"aoColumns": [
{ "sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return '<a href=\"Details/' +
oObj.aData[0] + '\">View</a>';
}
},
{ "sName": "COMPANY_NAME" },
{ "sName": "ADDRESS" },
{ "sName": "TOWN" }
]
});
});
回答by RL89
You can use Jquery Grid Pluginin that case.
在这种情况下，您可以使用Jquery Grid 插件。
Read this article to use MVC Data Grid: using jqGrid and JSON
阅读本文以使用 MVC 数据网格：使用 jqGrid 和 JSON
http://blog.davidrenz.com/?p=663
http://blog.davidrenz.com/?p=663
Update:
更新：
In that case if you only want to use J-query Datatable go to this link.
在这种情况下，如果您只想使用 J-query 数据表，请转到此链接。
http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part
http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part
回答by Joshua G
I put this in a function because that was the easiest way to do it for me, feel free to copy the function and use it. All your going to need to change is the url and the column names and number there of. To call it just copy the html with the paths done so that they match whatever yours are.
我把它放在一个函数中，因为这对我来说是最简单的方法，可以随意复制该函数并使用它。您只需要更改 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('<tr><td><img src="/Content/imgs/loading.gif" /></td></tr>');
},
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 <p>s or <div>s or whatever.
*/
if (data.length > 1) {
for (var key in data) {
if (data.hasOwnProperty(key)) {
$("#" + tableID).empty().append("<tr><td>" + data[key].colName1 + "</td><td>" + data[key].colName12+ "</td> ... <td>" + data[key].colNameN + "</td></tr>");
}
}
} else {
$("#" + tableID).empty().append("<tr><td>" + this.colName1 + "</td><td>" + this.colName2 + "</td> ... <td>" + this.colNameN + "</td></tr>");
}
},
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 }]);
}
<script src="/Scripts/jquery-1.7.2.js"></script>
<script src="/Scripts/jquery-ui-1.8.23.min.js"></script>
<script src="/Scripts/jquery.jqGrid.min.js"></script>
<script src="/Scripts/grid.locale-en.js"></script>
<script src="/Scripts/ADTFunding.js"></script>
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
SetUpFundingGrid('dataTable', 'pager', '9895998');
});
</script>
<table id="dataTable"></table>
<div id="pager"></div>
回答by Ashik Basheer
You can also use the fnAddDataproperty to push json to table. Check this article https://jqueryajaxphp.com/jquery-datatable-using-json/
您还可以使用该fnAddData属性将 json 推送到表。检查这篇文章https://jqueryajaxphp.com/jquery-datatable-using-json/
