Использование AJAX XMLHttpRequest для заполнения тела DataTable

Question

Я ранее просто отправлял страницу самому себе, чтобы загрузить все, и он работал нормально, я просто не хочу использовать все обновления страницы, поэтому я изменил большую часть своего контента до AJAX. Я часами играю с разными вещами, и я не уверен, что делать в этот момент.

У меня есть два блока выбора. После того, как оба выбраны, я использую запрос AJAX (вызов функции PHP) для заполнения моего DataTable. После вызова таблица всегда будет заполняться по крайней мере одной строкой (обычно несколькими строками). Я использую html для создания строк таблицы вместо использования rows.add(). Причина этого в том, что я откровенно не уверен, как перейти к передаче данных для строк назад (потому что мне нужно передать несколько строк после их запроса из БД) из функции PHP в javascript, где я могу использовать строки. Добавить(). Стол отлично заполняется.

Первая проблема заключается в том, что строки не форматируются с заголовком (они не совпадают с заголовком).

Вторая проблема заключается в том, что после ее заполнения я теряю одну единственную функцию выбора (которая работала, когда я отправил страницу себе, чтобы загрузить таблицу). Я предполагаю, что это потому, что я заполняю таблицу ПОСЛЕ того, как она была инициализирована без использования rows.add().

Любой вход будет оценен.

Здесь я вызываю php-файл и помещаю данные в тело таблицы по id.

function requestData(url, cfunc) { 
    if (typeof url == 'undefined' | typeof cfunc == 'undefined') 
    { 
     return; 
    } 
    else{ 
     var xhttp; 
     xhttp=new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (xhttp.readyState == 4 && xhttp.status == 200) { 
       cfunc(xhttp); 
      } 
     }; 
     xhttp.open("GET", url, true); 
     xhttp.send(); 
    } 
} 


function getSerialNumberTableBody(xhttp) { 
    document.getElementById("serialNumberTableBody").innerHTML = xhttp.responseText; 
} 

Answer 1

Из моего понимания, то да, желательно инициализировать таблицу после того, как данные будут доступны. В вашей ситуации я обычно предлагаю изменить то, что вы отправляете обратно из своего PHP-файла, что-то, что можно легко проанализировать в Javascript-объекте, таком как JSON или XML.

Синтаксический JSON: http://www.w3schools.com/json/json_eval.asp

Есть много способов синтаксического анализа XML, и Google является вашим другом, но вы можете увидеть пример стандартного XML разбора здесь http://www.w3schools.com/xml/dom_intro.asp

После того, как у вас есть данные, которые вы надеваете» t нужно загружать каждую строку с помощью rows.add(). Если у вас есть яваскрипт объект, который имеет все строки, необходимые для таблицы как массивы, вы можете просто загрузить его в таблицу, когда вы инициализируете его так:

function loadDataToTable(url,tableName){ 

    var dataSet; 
    $.get(url), function(responseText) { 
     /*assuming the result is the JSON you need. 
     I'm skipping over all of the checks you would do*/ 
     dataSet = JSON.Parse(responseText) 
    }; 



    $("#"+tableName).DataTable({ 
     data: dataSet, 
     columns: [ 
      { title: "Col1" }, 
      { title: "Col2" }, 
      { title: "Col3" }, 
      { title: "Etc." } 
     ] 
    }); 
} 

Я не уверен, почему вы бы возникнуть проблема с выравниванием заголовка, не видя больше подробностей о том, как структурированы ваши CSS и HTML.

Для обновления таблицы, вы можете использовать rows.add(), но если это не особенно большой набор данных, вы всегда можете просто повторить всю таблицу в соответствии с: How to refresh DataTables

Если вы хотите придерживаться оказывающей HTML, то вы можете создать свою таблицу HTML и затем инициализировать DataTable после ее полной загрузки.См: https://www.datatables.net/examples/data_sources/dom.html

Edit: Bonus Round Ajax исходящие данные

Если вы настроены с получением запроса JSON из файла PHP и загрузка, что с помощью AJAX вы всегда можете просто напрямую использовать его в качестве источника данных для DataTable:

function loadAJAXDataToTable(url,tableName){ 

    //return DataTable object 
    return $("#"+tableName).DataTable({ 
     ajax: url, 
    }); 
} 

function refreshAJAXDataTable(url, table){ 
    //table should be a DataTable object 
    table.ajax.url(url).load() 
} 

Смотреть еще: https://www.datatables.net/examples/data_sources/ajax.html