Как добавить ответ JSON для вызова REST в таблицы данных jQuery?

Question

Я пытаюсь отобразить ответ JSON на вызов REST в jQuery datatables .

Ниже приведен ответ JSON, который я получаю.

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

Сценарий:

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

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>

Может ли кто-нибудь дать ответ, почему я не могу загрузить ответ JSON в datatable? Есть ли лучший подход для получения этой функциональности?

Answer 1

Вы все делаете правильно, вы просто делаете одну ошибку новичка, и ее легко пропустить.

Когда вы делаете

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

Вы создаете новую таблицу данныхпример.Datatables возвращает экземпляр объекта (с функциями API) по этому вызову, но вы нигде не храните этот экземпляр, поэтому вы теряете все ссылки на только что созданную таблицу данных.

Чтобы решить эту проблему, просто добавьтессылка на таблицу данных, которую вы создаете, вот так

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

, а затем ссылка на нее в каждой функции

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

Вот пример JSFiddle , чтобы увидеть его в действии.

Пример динамического добавления новой строки для datatables.net довольно плохой, так как он выполняет встроенный вызов API без необходимости добавлять ссылку.Это лучше продемонстрировано на следующем примере: мультифильтрация .

. Вы также можете прочитать об этом в их документации API .
Подсказка: этодемонстрируется в первом ряду под $