Passing JSON string to DataTable

anjibman

Hi All,

I am trying to pass a JSON string to a DataTable but not sure which API I have to use. I have initialized the DataTable on document ready but no data in it for now. We get data from aseperate AJAX call so I have JSON string on succcess call back funxtion of AJAX call. Now I have to load/send this JSON string to the table. How can I do this?

tangerine

http://datatables.net/examples/data_sources/ajax.html

anjibman

Hope following code snippet help to understand my question.

$(document).ready(function () {
  myTable = $('#myTable').dataTable({
    //I don't have AJAX call here just table configuration
  });
});

someMethod() {
  $.ajax({
    //I make AJAX call here to get data
    success: function(response) {
      //I have to load this response (which is JSON string) in myTable
    }
  });
}

allan

Use rows.add() to add new data to the table.

Allan

anjibman

I am using v1.10.2 but I am getting

myTable.rows is undefined

allan

Second top FAQ:

Q. I get an error message stating that an API method is not available
A. Very likely you are using a jQuery object rather than a DataTables API instance. The form $().dataTable() will return a jQuery object, while $().DataTable() returns a DataTables API instance. Please see the API documentation for further information.

Allan

anjibman

I am able to load the content but I have another question here. My 5th columns is an address so it should combine different field from the JSON string (e.g. addressLine1, addressLine2, city, state, and zipcode). How can I load and format the column so it have following format

123 Main  St
Apt#20
Farmville, NV 88901

My code look like this

$('#btnSearchMember').click(function() {
        if(validMemberSearchForm()) {
            $jq11.ajax({
                type: 'POST',
                url: '/telephone/memberSearch.htm',
                data: $("#memberSearchForm").serialize(),
                cache: false,
                success: function(response) {
                    var resultTable = $jq11('#memberSearchResultTable').DataTable({
                        "aoColumnDefs": [{
                            "bSortable": false, 
                            "aTargets": [4]
                        }],
                        "columns": [
                            { data: 'memberPrefId' },
                            { data: 'firstName' },
                            { data: 'lastName' },
                            { data: 'groupName' },
                            { data: 'addressLine1' },
                            { data: 'status' }                          
                        ],
                        "destroy": true,
                        "dom": 'lrtip',
                        "language": {
                            "emptyTable": "No match member found",
                            "infoFiltered": " "
                        },
                        "order": [[2, "desc"]]
                    });
                    resultTable.rows.add(response).draw();
                    dataSet = response;
                    displayMemberSearchResult();
                }
            });
        }
    });

allan

Use columns.render.

Allan

tangerine

Write yourself a "render" function.

https://datatables.net/reference/option/columns.render