4

最初に、私が達成しようとしていることについて言及します。PHPのCodeIgniterフレームワークを使用しています。データベースに 5 つのテーブルがあり、表示ページのボタンをクリックして Datatables 形式で表示したいと考えています。サーバー側処理phpをデータソースとして使用しています。そこで、最初は Datatable 形式で 1 ​​つのテーブルのみを表示するコードを作成し、それで成功しました。ボタンクリックイベントで5つのうち一度に1つのテーブルを表示したいと思います。ただし、$aColumns の長さは、HTML テーブルで定義された列の数と等しくなければなりません。マーク タブを考慮すると、4 つの列 Student_id、exam_id、subject_id、marks_achieved があります。現在、別のテーブルはブランチであり、branch_id と branch_name のみの 2 つの列があります。そのため、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';
    }

編集: user1190992 によって投稿されたソリューションは機能しますが、アプローチ全体が変更されます。その中で、列のヘッダーをサニタイズしたいと思います。代わりに「branch_id」が表示される 支店IDを表示したい。このサニタイズを実行するにはどうすればよいですか?

4

1 に答える 1

2

これは、JSON データから動的に HTML を作成するための非常に簡単な方法です。ただし、サーバー側の処理は使用しません。

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>

お役に立てれば。

于 2013-01-01T16:37:22.580 に答える