Обновление данных с новыми данными

Question

Итак, у меня есть PHP-скрипт, который запрашивает базу данных и выводит JSON. Запрос что-то вроде так

SELECT year AS 'label', SUM(size) AS 'value' 
FROM db.dbo.table 
GROUP BY year 

Это добавляет размер каждого пункта, достигнутого в соответствующем году, и отображает общую сумму за все годы в DataTable. Я сделал ящик раскрывающийся, который показывает все эти годы, как и

$.getJSON('script.php', function(data){ 
    var html = ''; 
    var len = data.length; 

    html += '<option value=' + 1 + '>All</option>'; 

    for (var i = 2; i< len; i++) { 
     html += '<option value=' + i + '>' + data[i].label + '</option>'; 
    } 

    $('select#list').append(html); 
}); 

То, что я хочу сделать, когда пользователь выбирает год, он обновляет Datatable со всеми отдельными объектами, которые были сделаны в этом году , Для этого потребуются новые столбцы. Вот мой PHP.

<?php 
$myServer = "server"; 
$myDB = "db"; 

$conn = sqlsrv_connect ($myServer, array('Database'=>$myDB)); 

$sql ="SELECT year AS 'label', SUM(size) AS 'value' 
FROM db.dbo.table 
GROUP BY year"; 

$data = sqlsrv_query ($conn, $sql); 
$result = array(); 

do { 
    while ($row = sqlsrv_fetch_array ($data, SQLSRV_FETCH_ASSOC)) { 
     $result[] = $row; 
    } 
} while (sqlsrv_next_result($data)); 

echo json_encode ($result); 

sqlsrv_free_stmt ($data); 
sqlsrv_close ($conn); 
?> 

Вот мой код инициализации

var oTable = $('#chart').dataTable({ 
    "bProcessing": true, 
    "sPaginationType": "full_numbers", 
    "sAjaxSource": "script.php", 
    "sAjaxDataProp": "", 
    "aoColumns": [ 
     { "mData": "label", "sClass": "center" }, 
     { "mData": "value", "sClass": "center" } 
    ], 

    "sDom": 'T<"clear">Rlfrtip', 
    "oTableTools": { 
     "sSwfPath": "/media/swf/copy_csv_xls_pdf.swf", 
     "sRowSelect": "multi", 
     "aButtons": ["select_all", "select_none", 
      { 
      "sExtends": "collection", 
      "sButtonText": "Export Selected Rows", 
      "aButtons": [ 
        { "sExtends": "copy", "bSelectedOnly": true, "mColumns": [ 0, 1 ] }, 
        { "sExtends": "csv", "bSelectedOnly": true, "mColumns": [ 0, 1 ], "bFooter": false }, 
        { "sExtends": "xls", "bSelectedOnly": true, "mColumns": [ 0, 1 ], "bFooter": false }, 
        { "sExtends": "pdf", "bSelectedOnly": true, "mColumns": [ 0, 1 ], "bFooter": false }, 
       ] 
     }, 
      { "sExtends": "print", "sButtonText": "Print View" } 
     ] 
    } 
}); 

И мой HTML для исходного запроса (где суммируются размеры)

<table id="chart" style="clear: both"> 
    <thead> 
     <tr> 
      <th>year</th> 
      <th>size</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td colspan="3" class="dataTables_empty">Loading data from server</td> 
     </tr> 
    </tbody> 

    <tfoot> 
     <tr> 
      <th>year</th> 
      <th>size</th> 
     </tr> 
</tfoot> 
</table> 

Я бегу в несколько проблем. Столбцы закодированы на HTML-странице, и я не знаю, как их изменить. Я также не знаю, как обновить запрос на PHP-скрипте, чтобы он отображал новую информацию, когда они нажимают параметр. Я предполагаю, что мне придется использовать fnReloadAjax, но я действительно не знаю.

Может кто-то, пожалуйста, помогите мне? Благодаря!

---

Я добавил код для fnReloadAjax до инициализации, и добавил

$(document).on('change', '#list', function (event) { 
    oTable.fnReloadAjax(); 
}); 

после инициализации. Это перезагрузка таблицы должным образом. Однако мне нужно изменить запрос. Я попытался использовать код Дэвида для aoData и $ selectedYear, но я не знаю достаточно PHP, чтобы заставить его делать то, что я хочу. Другое дело, что в раскрывающемся списке есть опция «Все». Поэтому, когда пользователь сначала выбирает год, он полностью изменит таблицу. Тем не менее, он должен быть в состоянии вернуться к списку лет в исходной таблице

---

Я пытался поставить отборное заявление в <form>, как так

<form method="post" style="display: inline-block"> 
    <select name="value" id="list"></select> 
</form> 

И используя $selectedValue = $_POST['value']; в файл PHP использовать выбранное значение в качестве переменной. Затем я пытаюсь использовать оператор if, чтобы выбрать, какой запрос использовать (если все, то запрос 1, иначе, запрос 2). Однако, это не работает

if ($selectedValue == "All") { 
    $sql ="SELECT year AS 'label', SUM(size) AS 'value' 
     FROM db.dbo.table 
     GROUP BY year"; 
} else { 
    $sql ="SELECT * 
     FROM db.dbo.table" 
} 

Answer 1

Глядя на ваш DataTables инициализации вы отсутствуют некоторые весьма важные свойства инициализации, которые имеют жизненно важное значение для сглаживания на стороне сервера операции DataTables, bServerSide является одним из наиболее важных.

Посмотрите в документации для server side here

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

fnServerParams(aoData) 

это используется для передачи дополнительных данных на сервер каждый раз DataTables делает AJAX запрос для новых данных.

var oTable = $("#chart").dataTable({ 
    bServerSide : true, 
    fnServerParams : function(aoData) { 
     // Push an object to the aoData array to make it available server side 
     aoData.push({"name" : "year", "value" : $('#list')[0].value}); 
    } 
} 

В script.php

$selectedYear = $_REQUEST['year']; 

теперь вы можете использовать это в ваш запрос, чтобы ограничить результаты в этом году.

Другая очень полезная функция данных - fnDraw(). Это заставляет обновляемый datatable обновляться, когда он вызывается на объект данных, отправляя с ним какие-либо измененные параметры.

var oTable = $('#chart').dataTable({ ... }); 

$(document).on('change', '#list', function(event) { 
    oTable.fnDraw(); 
});