AJAX JSON загрузки JQuery DataTable

Question

Так что у меня этот скрипт в файл с именем qnams.php, который возвращает JSON:

include ("../include/database.php"); 

include ("../include/sessions.php"); 

$select = "SELECT column1,column2,column3,column4 
      FROM qnamtable WHERE USER = '$username'"; 

$query = mysqli_query($dbc, $select) or die(mysqli_error()); 

$out = array(); 

while ($row = $query->fetch_array()) { 
    $out[] = $row; 
} 
echo json_encode($out); 

mysqli_free_result($query); 

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

На моей главной странице, я эту функцию в нижней части страницы:

$(function() { 
    $('#example1').dataTable({ 
     "bPaginate": false, 
     "bLengthChange": true, 
     "bFilter": true, 
     "bSort": true, 
     "bInfo": true, 
     "sScrollY": "auto", 
     "sScrollCollapse": true, 
     "bAutoWidth": true 
    }); 
}); 

Что мне нужно добавить в эту функцию, чтобы включить JSON со всеми заголовками и данными?

Пожалуйста, помогите и благодарите вас заранее.

Answer 1

Все ответы выше были полезны, однако в конце концов мне просто нужно было приобрести последнюю версию JQuery dataTables. Я использовал более старый код со старым шаблоном, и это было основной проблемой, влияющей на мои результаты.

Answer 2

Вы должны использовать AJAX вариант Jquery DataTables

АЯКС: { URL: 'путь///PHP/файл/с/jsondata' }

Answer 3

Вы можете использовать, как показано ниже ,

$(function() { 
    $('#example1').dataTable({ 
     "processing": true, 
     "serverSide": true, 
     "ajax": "qnams.php" //set your php file location 
     "bPaginate": false, 
     "bLengthChange": true, 
     "bFilter": true, 
     "bSort": true, 
     "bInfo": true, 
     "sScrollY": "auto", 
     "sScrollCollapse": true, 
     "bAutoWidth": true 
    }); 
}); 

HTML, должно быть, как показано ниже, убедитесь, что идентификатор должен быть example1

Установить все заголовки как можно ниже.

<table id="example1" class="display" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>column1</th> 
     <th>column2</th> 
     <th>column3</th> 
     <th>column4</th> 
     <th>column5</th> 
     <th>column6</th> 
    </tr> 
    </thead> 

    <tfoot> 
    <tr> 
     <th>column1</th> 
     <th>column2</th> 
     <th>column3</th> 
     <th>column4</th> 
     <th>column5</th> 
     <th>column6</th> 
    </tr> 
    </tfoot> 
</table> 

Проверить больше информации от here

Answer 4

Сначала я хотел бы сказать, что вы должны использовать fetch_assoc, не fetch_array(). fetch_array() будет включать в себя как ассоциированная и индексированный массив:

[{"0":"x","column1":"x","1":"y","column2":"y"}] 

нам просто нужно

[{"column1":"x","column2":"y"}] 

Тогда вот полностью автоматизированный скрипт для заселять

<table id="example1"></table> 

с любым JSON пока он хорошо сформирован (как кажется, ваш PHP-скрипт):

$.ajax({ 
    url : 'qnams.php', 
    dataType : 'json', 
    success : function(json) { 
     //build the column definitions for titles and data-indexes 
     var columns = []; 
     Object.keys(json[0]).forEach(function(column) { 
      columns.push({ title: column, data: column }) 
     }) 
     $('#example1').dataTable({  
      data : json, 
      columns : columns, 

      "bPaginate": false, 
      "bLengthChange": true, 
      "bFilter": true, 
      "bSort": true, 
      "bInfo": true, 
      "sScrollY": "auto", 
      "sScrollCollapse": true, 
      "bAutoWidth": true 
     }) 
    } 
}); 

Предполагаете, вы используете 1.10.x of dataTatables.