Question

我建议使用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"); }
        });

更新我找到了这些link，但我不知道如何实现它。

Answer 1

在这种情况下，您可以使用 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 2

您应该使用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 '<a href=\"Details/' + 
                            oObj.aData[0] + '\">View</a>';
                        }
                    },
                    { "sName": "COMPANY_NAME" },
                    { "sName": "ADDRESS" },
                    { "sName": "TOWN" }
                ]
 });
});

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('<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>

Answer 4

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

使用我的json数据填充JQuery DataTable

4 个答案: