How to bind JSON data in a table using jQuery DataTables

Question

I want to bind data to a table using jQuery DataTables.

I am returning the data using action result and converting it to JSON in view, data is not displaying in the table, only blank columns are shown.

Here is the view part

  @model Guardian.Core.Model.Models.PatientMedicationsCollection
    @{
        var ModelJsonData = Newtonsoft.Json.JsonConvert.SerializeObject(Model);
        Layout = null;
    }

    <script type="text/javascript">

        var MedicationMasterData = JSON.parse(@Html.Raw(Json.Encode(ModelJsonData)));
        var CCDAChecked;
        var LatestCCDA;
        var AllCCDA;
        var CLaimsChecked;
        var AllClaims;
        var Last6Month;
        var OneYear;
        var FilteredData = [];

        $(document).ready(function () {
            debugger;

            $.each(MedicationMasterData, function (idx, obj) {
                FilteredData.push(this);

            });
            FilterTable(MedicationMasterData);
});
        function FilterTable(FilteredData) {
            debugger;
            FData = JSON.stringify(FilteredData)
            $('#PatientMedications').DataTable({
                "scrollX": 100,
                "paging": true,
                "pagingType": "full_numbers",
                "dom": '<"toolbar">frtip',
                "aaData": FData,

                columns: [
                    { title: "PatientID" },
                    { title: "FirstName" },
                    { title: "LastName" },
                    { title: "DOB." },
                    { title: "Gender" },
                    { title: "Source" },
                    { title: "SourceCreatedDate" },
                    { title: "SourceKeyID" },
                    { title: "LatestCCDA" },
                    { title: "Code" },
                    { title: "CodeType" },
                    { title: "DrugName" },
                    { title: "DrugDecriptionsM" },
                    { title: "StartDate" },
                    { title: "StopDate" },
                    { title: "Instructions" },
                    { title: "Status" },
                    { title: "DoseQuantity" },
                    { title: "RateQuantity" },
                    { title: "RateQuantityUnit" },
                    { title: "DrugDecriptionsM" },
                    { title: "ClaimLineFromDate" },
                    { title: "DaysSupply" },
                    { title: "DOSAGEFORMNAME" },
                    { title: "ROUTENAME" },
                    { title: "ST" }

                ]

            });

Controler Part where we are returning the data using action result

public ActionResult PatientMedications(int patientID)
            {
                return PartialView(patientrepository.PatientMedications(patientID));
            }

A couple of questions - Why are you returning a 'PartialView'? Why don't you return a json object instead of doing all that client-side processing Use return Json(new { aaData= — markpsmith
– markpsmith, Commented Oct 6, 2015 at 11:23
I did not catch your question clearly but i guess your column name should match. Then it will show the data — Hiba
– Hiba, Commented Oct 6, 2015 at 13:14

Alien · Accepted Answer · 2018-07-11 09:39:37Z

1

$('#PatientMedications').dataTable({
  "aaData": data,   //this is your JSON object, which is what is showing in your post above with console.log(data)
  "aoColumns": [{
    "mDataProp": "PatientID"
  }, {
    "mDataProp": "FirstName"
  }]
});

edited Jul 11, 2018 at 9:39

Alien

16k8 gold badges43 silver badges64 bronze badges

answered Jul 11, 2018 at 8:51

Sanjay Pawar

113 bronze badges

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

Comments

Gyrocode.com · Accepted Answer · 2015-10-06 14:13:15Z

0

Use columns.data option instead of columns.title to define data source for the column from the row's data object.
Do not pass JSON string to aaData, array is expected instead. Remove line with JSON.stringify().
Use data option name instead of retired aaData. I assume that FilteredData is an array of objects.

$('#PatientMedications').DataTable({
    "scrollX": 100,
    "pagingType": "full_numbers",
    "dom": '<"toolbar">frtip',
    "data": FilteredData,
    "columns": [
        { data: "PatientID" },
        { data: "FirstName" },
        { data: "LastName" },
        { data: "DOB." },
        { data: "Gender" },
        { data: "Source" },
        { data: "SourceCreatedDate" },
        { data: "SourceKeyID" },
        { data: "LatestCCDA" },
        { data: "Code" },
        { data: "CodeType" },
        { data: "DrugName" },
        { data: "DrugDecriptionsM" },
        { data: "StartDate" },
        { data: "StopDate" },
        { data: "Instructions" },
        { data: "Status" },
        { data: "DoseQuantity" },
        { data: "RateQuantity" },
        { data: "RateQuantityUnit" },
        { data: "DrugDecriptionsM" },
        { data: "ClaimLineFromDate" },
        { data: "DaysSupply" },
        { data: "DOSAGEFORMNAME" },
        { data: "ROUTENAME" },
        { data: "ST" }
    ]
});

answered Oct 6, 2015 at 14:13

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

3 Comments

Adesh Gaonkar Over a year ago

Yes it array of object but if we use data it will not work so I used aaData and mData and its working fine

Gyrocode.com Over a year ago

@AdeshGaonkar, what DataTables version are you using?

Adesh Gaonkar Over a year ago

We are using DataTables of version 1.10.4

Adesh Gaonkar · Accepted Answer · 2015-10-07 05:13:19Z

I used aaData and mData and its working fine

 function FilterTable(FilteredData) {

        $('#PatientMedications').DataTable({
            "bDestroy": true,
            "bRetrieve": true,
            "scrollX": 100,
            "paging": true,
            "pagingType": "full_numbers",
            "dom": '<"toolbar">frtip',
            "aaData": FilteredData,

            "aoColumns": [
                { "mData": "PatientID" },
                { "mData": "FirstName" },
                { "mData": "LastName" },
                { "mData": "DateOfBirth" },
                { "mData": "Gender" },
                { "mData": "Source" },
                { "mData": "SourceCreatedDate" },
                { "mData": "SourceKeyID" },
                { "mData": "LatestCCDA" },
                { "mData": "Code" },
                { "mData": "CodeType" },
                { "mData": "DrugName" },
                { "mData": "Drug Descriptions" },
                { "mData": "StartDate" },
                { "mData": "StopDate" },
                { "mData": "Instructions" },
                { "mData": "Status" },
                { "mData": "DoseQuantity" },
                { "mData": "RateQuantity" },
                { "mData": "RateQuantityUnit" },
                { "mData": "ClaimLineFromDate" },
                { "mData": "QuantityDispensed" },
                { "mData": "DaysSupply" },
                { "mData": "DosageFormName" },
                { "mData": "ROUTENAME" },
                { "mData": "ST" }

            ]

        });

Collectives™ on Stack Overflow

How to bind JSON data in a table using jQuery DataTables

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related