Populate JQuery DataTable with my json data

Question

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

$.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"); }
        });

Update I've found these link, but I dont know how to implement it.

So why don't you parse the result, and create a table element then push the result's elements as rows, finally activate jQuery DataTable ? — Issa Qandil
– Issa Qandil, Commented Sep 12, 2012 at 8:40

James A Mohler · Accepted Answer · 2014-05-22 18:45:52Z

1

You should use JQuery DataTable sAjaxSource property to specify ajaxsource in your case it would be /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" }
                ]
 });
});

edited May 22, 2014 at 18:45

James A Mohler

11.1k15 gold badges51 silver badges76 bronze badges

answered Sep 12, 2012 at 9:04

BobRock

3,4673 gold badges33 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

panjo Over a year ago

these is fine when I need on page init to display data, but in my case I need to send data on js success: function (result) { } block.

2 revs · Accepted Answer · 2012-09-12 08:52:02Z

1

You can use Jquery Grid Plugin in that case.

Read this article to use MVC Data Grid: using jqGrid and JSON

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

Update:

In that case if you only want to use J-query Datatable go to this link.

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

edited Sep 12, 2012 at 8:52

community wiki

2 revs
Rahul

2 Comments

panjo Over a year ago

thanks for the answer, but I'm interested in data table implementation.

user2246674 Over a year ago

jqGrid has to be even more brain-dead than DataTables (which is awkward, but at least it supports a function to fetch the data from a different async which is such a trivial concept that would actually make the grid much simpler) when dealing with remote data.

Joshua G · Accepted Answer · 2013-01-09 22:53:44Z

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.

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>

Ashik Basheer · Accepted Answer · 2017-05-09 06:22:35Z

0

You can also use the fnAddData property to push json to table. Check this article https://jqueryajaxphp.com/jquery-datatable-using-json/

answered May 9, 2017 at 6:22

Ashik Basheer

1,6014 gold badges18 silver badges36 bronze badges

1 Comment

Roberto Over a year ago

The link is dead :(

Collectives™ on Stack Overflow

Populate JQuery DataTable with my json data

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related