Использование DataTables для таблицы с содержимым от ajax - PullRequest
Новая
       22

Использование DataTables для таблицы с содержимым от ajax

0 голосов
/ 08 мая 2020

Я работаю над этой программой. Программа отображает темы под определенной c темой.

Мой главный вопрос: будет ли DataTable работать в такой настройке?

Это код в HTML. 

<div class="table-responsive" id="subject_container">
                <table id="tbl_subject" class="table table-striped">
                    <thead>
                        <tr>
                            <th>Chapter</th>
                            <th>Topic</th>
                            <th>Content</th>
                        </tr>
                    </thead>
                    <tbody id="disp_topics"></tbody>
                </table>
            </div>

Это фрагмент кода в jquery: 

$(function(){
  //this is only for simplification. Subjectid will be coming from a select input.
  let subjectid = 1;
  get_topics(subjectid);

  //this part right here. If this cannot work, is there a way to make it work?
  $('#tbl_subject).DataTable();
});

function get_topics(subjectid){
  $.ajax({
    url: 'includes/subject_handler.php',
    method: 'POST',
    data: {
      key: 'get_topics',
      subjectid: subjectid
    },
    success: function(data){
      $('#disp_topics).html(data);
    }
  });

Это код includes / subject_handler. php: Я использую ключи так как этот же файл сценария выполняет другие задачи. Спасибо за понимание. 

if($_POST['key'] == 'get_topics'){
   $subjectid = $_POST['subjectid'];
   $data = '';

   if(!empty($subjectid)){
      $sql = "SELECT topic.subjectid, chapter, topic, content FROM topic INNER JOIN subject
             ON subject.subjectid=topic.subjectid WHERE topic.subjectid = ?";
      $stmt=$db->prepare($sql);
      $stmt->bindValue(1, $subjectid);
      $stmt->execute();

      if($stmt->rowCount() > 0){
         $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

         foreach($rows as $row){
            $data .= '<tr>
                        <td>'.$row['chapter'].'</td>
                        <td>'.$row['topic'].'</td>
                        <td>'.$row['content'].'</td>
                     </tr>';
         }

         exit($data);
      }
   }

}

1 Ответ

0 голосов
/ 08 мая 2020

вы можете использовать ajax атрибут таблицы данных. 

$('#tbl_subject').DataTable( {
    processing: true,
    serverSide: true,
    serverMethod: 'post',
    ajax: 'includes/subject_handler.php'
    columns: [
            {data: 'chapter', name: 'chapter'},
            {data: 'topic', name: 'topic'},
            {data: 'content', name: 'content'},
    ]
} );

А для серверной части, если вам нужно получить доступ к значению поиска, вы можете сделать это, 

$requestData = $_REQUEST;
$requestData['search']['value']

В вашем случае это то, как использовать его в , где close. 

$sql .= " AND ( chapter LIKE '" . $requestData['search']['value'] . "%' ";
$sql .= " OR topic LIKE '" . $requestData['search']['value'] . "%' ";
$sql .= " OR content LIKE '" . $requestData['search']['value'] . "%' )";

И если вам нужно получить данные сортировки, вы можете получить это, 

$requestData['order'][0]['column'] // column name which user sorts
$requestData['order'][0]['dir'] // derection (ASC/DESC)

В вашем случае это будет так, и не забудьте использовать $requestData['start'] и $requestData['length'] для работы нумерации страниц. 

$sql .= " ORDER BY " . $columns[$requestData['order'][0]['column']] . "   " . $requestData['order'][0]['dir'] . "   LIMIT " . $requestData['start'] . " ," . $requestData['length'] . "   ";

Вы можете включить это значение поиска и значения порядка в свой sql запрос внутри серверной части.

И, наконец, вам необходимо отформатировать данные перед отправкой во внешний интерфейс. 

    $json_data = array(
        "draw" => intval($requestData['draw']),   // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw.
        "recordsTotal" => intval($totalData),  // total number of records
        "recordsFiltered" => intval($totalFiltered), // total number of records after searching, if there is no searching then totalFiltered = totalData
        "data" => $data   // total data array
    );
    echo json_encode($json_data);

Это намного проще, чем выглядит. Необходимо получить общее количество записей из запроса и общее количество отфильтрованных записей из другого запроса и набора данных в json.

Я добавил предыдущий пример sql только для пояснения. Для предотвращения SQL инъекции вы должны использовать Prepared Statements . 

$sql .= " AND ( chapter LIKE ? OR topic LIKE ? OR content LIKE ?";
$params = array($requestData['search']['value'] . "%", $requestData['search']['value'] . "%", $requestData['search']['value'] . "%");
$stmt = $handle->prepare($sql);
$stmt->execute($params);

И вам нужно сделать то же самое для ORDER BY и LIMIT часть запроса.

и внутри этого учебника есть хороший пример того, как это работает на бэкэнде.

Вы также можете отправлять данные в бэкэнд. 

       ajax: {
            url: "Your url",
            data: function (d) {
                d.var1= 'var 1';
                d.var2= 'var 2';
            }
        },

И получить доступ к данным в серверной части следующим образом. 

$var1 = $_REQUEST['var1'];
$var2 = $_REQUEST['var2'];

И будьте осторожны, чтобы не использовать начало и конец (например: - d.start= 'var 1';) для передачи данных на задний план. конец, так как они используются для нумерации страниц. В этой ссылке есть хороший пример.

...