Сначала я расскажу о том, чего я пытаюсь достичь. Я использую структуру CodeIgniter для PHP. У меня есть 5 таблиц в моей базе данных, и я хочу отобразить их в формате Datatables нажатием кнопки на странице отображения. Я использую серверную обработку php в качестве источника данных. Поэтому сначала я сделал код для отображения только одной таблицы в формате Datatable и был успешным в этом. Теперь я хочу отобразить одну таблицу за раз из 5 при событии нажатия кнопки. Но длина $ aColumns должна быть равна числу столбцов, определенных в таблице HTML. Теперь, учитывая метки tabe, он имеет 4 столбца student_id, exam_id, subject_id и marks_achieved. Теперь другая таблица является ветвью и имеет 2 столбца только branch_id и имя_пакета. Поэтому я не могу увеличивать или уменьшать теги в HTML динамически, поэтому я запутался. Также я использую этот источник для создания данных. Здесь вы можете проверить функцию getTable () .
JQuery:
$(document).ready(function() { $('#datatable').dataTable({ "sPaginationType":"full_numbers", "bJQueryUI":true, "bProcessing": true, "bServerSide": true, "sServerMethod": "GET", "sAjaxSource": "datatable/getTable", "iDisplayStart": 0, "iDisplayLength": 10, "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "aaSorting": [[0, 'asc']], "aoColumns": [ { "bVisible": true, "bSearchable": true, "bSortable": true }, { "bVisible": true, "bSearchable": true, "bSortable": true }, { "bVisible": true, "bSearchable": true, "bSortable": true }, { "bVisible": true, "bSearchable": true, "bSortable": true } ] }) $('input[type=button]').bind('click', function(){ var param = $(this).attr('id'); data = param + '=1'; $.ajax({ type: 'POST', url: 'datatable', data: data }).done(function( data ) { console.log(data); $('#display_area').html(data); }); }) }); HTML:
<script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/javascript.js"></script> <script type="text/javascript" src="../js/jquery.dataTables.min.js"></script> </head> <body id="dt_example"> <form action="" method="post"> <input type="button" id="display_branch" name="display_branch" value="Display Branch Table" > <input type="button" id="display_marks" name="display_marks" value="Display Marks Table" > </form> <div id="container"> <div id="demo"> <table id="datatable" cellpadding="0" cellspacing="0" border="0" width="100%"> <thead> <tr> <th>Student ID</th> <th>Exam ID</th> <th>Subject ID</th> <th>Marks Achieved</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> <tfoot></tfoot> </table> </div> <div class="spacer"></div> </div> </body> </html>
Чтобы динамически получать столбцы, я сделал это изменение, как показано ниже в файле datatable.php, но он не работает. Что здесь не так, или я должен попробовать другой подход?
if(isset($_POST['display_marks'])) { $aColumns = array('student_id', 'exam_id', 'subject_id', 'marks_achieved'); $sTable = 'marks'; } if(isset($_POST['display_branch'])) { $aColumns = array('branch_id', 'branch_name'); $sTable = 'branch'; }
EDIT: решение, опубликованное пользователем1190992, работает, но весь подход изменен. И в этом я хочу дезинфицировать заголовки колонн. Вместо этого отображается «branch_id». Я хочу отобразить идентификатор филиала. Как я могу выполнить эту санитацию?
Это очень простой способ динамического создания HTML из данных JSON. Однако он не использует обработку на стороне сервера.
JavaScript
$(document).ready(function() { $(".abutton").click(function() { $('#myDatatable_wrapper').detach(); //Remove existing table var table = '<table id="myDatatable" class="table"><thead><tr>'; $.ajax({ url: 'dt.php', data: "table_id="+$(this).attr("id"), type: "POST", success: function (data) { $.each(data.aoColumns, function(key, value) { table += "<th>"+value+"</th>"; }); table += "</tr></thead><tbody>"; $.each(data.aaData, function(key, row) { table += "<tr>"; $.each(row, function(key, fieldValue) { table += "<td>"+fieldValue+"</td>"; }); table += "</tr>"; }); table += '<tbody></table>'; $('.container').html(table); $('#myDatatable').dataTable(); }, dataType: "json" }); }); });
PHP
$table_id = filter_input(INPUT_POST, "table_id", FILTER_SANITIZE_STRING); $dbconn = mysqli_connect("localhost", "username", "password"); if($table_id == "table1") { $sql_query = mysqli_query($dbconn, 'SELECT * FROM display_branch'); } else { $sql_query = mysqli_query($dbconn, 'SELECT * FROM display_marks'); } if(mysqli_num_rows($sql_query) == 0) { echo "Check your ID"; exit(1); } $data = array(); $data['aaData'] = array(); while($row = mysqli_fetch_assoc($sql_query)) { $data['aaData'][] = $row; } $data['aoColumns'] = array(); while($finfo = mysqli_fetch_field($sql_query)) { $data['aoColumns'][] = $finfo->name; } echo json_encode($data);
HTML
<button id="table1" class="abutton">Table 1</button><br /><button id="table2" class="abutton">Table 2</button> <div class="container"></div>
Надеюсь это поможет.