How to append REST call JSON response to jQuery datatables?

Question

I'm trying to display the REST call JSON response in jQuery datatables.

Below is the JSON response I'm receiving.

{
    "artifact": [
        {
            "artifactId": "I8cc4a96ef69a11e08b448cf533780ea2",
            "batchId": "15581",
            "processId": "115458787"
        },
        {
            "artifactId": "e08b448cf533780ea2I8cc4a96ef69a11",
            "batchId": "14962",
            "processId": "787974254"
        }
    ]
}

The Script:

<script type="text/javascript">
        $(document).ready(function () {
            $("#artifacts").dataTable({
                "sPaginationType": "full_numbers",
                "bJQueryUI": true
            });
        });
        function submitForm()
        {
            $.getJSON('http://myurl.com/JerseySample/rest/search', function(data) {
                $.each(data.artifact, function(i,artifact){
                        $('#artifacts').datatable().fnAddData([
                                artifact.artifactId,
                                artifact.batchId,
                                artifact.processId ]
                                );
                });
             });
        }
</script>

The HTML:

<form class="searchform">
        <input class="searchfield" type="text" /> 
        <input class="searchbutton" type="button" value="Go" id="go" onclick="submitForm()" /> 

</form>
    <div id="container">
        <div id="demo_jui">
            <table id="artifacts" class="display">
                    <thead>
                            <tr>
                                <th>Artifact Id</th>
                                <th>Batch Id</th>
                                <th>Legacy Id</th>
                            </tr>
                    </thead>
                    <tbody>
                    </tbody>
            </table>
        </div>
    </div>

Can someone provide an answer on why I am unable to load the JSON response into datatable? Is there a better approach to get this functionality?

ShadowScripter · Accepted Answer · 2012-03-06 10:56:56Z

5

You're doing everything right, you're just doing one rookie mistake, and it's easy to miss.

When you do

$("#artifacts").dataTable();

You're creating a new datatable instance. Datatables returns the object instance (with API functions) on that call, but you're not storing that instance anywhere, therefor, you lose all reference to the datatable you just created.

To solve this, just add a reference to the datatable you create like so

var thisTable = $("#artifacts").dataTable(
    {
        "sPaginationType": "full_numbers",
        "bJQueryUI": true
    }
);

and then reference it in your each function

$.each(data.artifact, function(i,artifact){
    thisTable.fnAddData(
        [
            artifact.artifactId,
            artifact.batchId,
            artifact.processId 
        ]
    );
 });

Here's a JSFiddle example to see it in action.

The dynamically add new row example on datatables.net is fairly poor, since it's doing an inline API call without the need to add a reference. It is better demonstrated on their following example on multi filtering.

You could also read about it on their API documentation.
Hint: it is demonstrated in the first row under $

edited Mar 6, 2012 at 10:56

answered Mar 6, 2012 at 10:41

ShadowScripter

7,3695 gold badges39 silver badges53 bronze badges

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

3 Comments

Slick Over a year ago

Thanks ShadowScripter! It worked. I read more in documentation and used serverside json response for datatable. But Pagination/Sort/Search is still an issue there. (Guessing, this must be because of sEcho thing.) Is there anything similar to datatables for REST xml responses- with Pagination/search capability? Thanks much! Help appreciated!

ShadowScripter Over a year ago

@Ajay There shouldn't be a problem with the pagination/sort/search. If you check out my example, add more than 10 rows and try sorting. It works exactly as it should. Ask a new question about that issue. Also, you should only use bServerside if you intend to do everything by yourself, including sorting/paging/searching. Having bServerside false by default is what you want in this scenario.

Slick Over a year ago

Thanks! I have raised a separate question for xml response. Question

Collectives™ on Stack Overflow

How to append REST call JSON response to jQuery datatables?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related