Question

我想在我的网站上设置一个数据表，我找到了一个我想要使用的表here，我一直试图将它转换为我需要的。我在这方面没有取得多大成功。我目前的情况是表没有填充数据库表中的行，我得到一个json响应错误。我可以打开检查员查看查询数据库的php文件返回json数据，我可以看到我以格式返回数据

    {"data":[
{"ssn":"100192686","dob":"1977-02-01","fn":"Latoyia","mi":"H","ln":"Herdon"},
{"ssn":"100263201","dob":"1962-06-15","fn":"Adena","mi":"M","ln":"Couch"}
]}

根据json验证器是有效的json但是当我重新加载我的页面时出现错误

 "table id=example - Invalid JSON response".

因此，如果json数据格式正确但未正确返回，我该怎么办？这是项目的gihub。我已经包含了我正在使用的mysql数据库文件以及一个包含XHR结果的文本文件。我觉得这行$（'＃example'）。DataTable（{javascript是我的问题所在

<?php
    include_once 'header.php';
?>
<script src = 'https://code.jquery.com/jquery-1.12.4.js'></script>
<script src = 'https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
<script src = 'https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js'></script>
<script src = 'https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js'></script>
<script src = 'JS/dataTables.editor.min.js'></script>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel = "stylesheet" href = "https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<link rel = "stylesheet" href = "https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
<link rel = "stylesheet" href = "https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
<section class="main-container">
    <div class="main-wrapper">
        <h2>Home</h2>
        <?php
            if (isset($_SESSION['u_id'])) {
                $sql = "SELECT * FROM employee;";
                $result = mysqli_query($conn,$sql);
                $resultCheck = mysqli_num_rows($result);
                if($resultCheck > 0){
                    echo
                    "<table id='example' class='display' cellspacing='0' width='100%'>
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>ssn</th>
                                    <th>dob</th>
                                    <th>first</th>
                                                    <th>MI</th>
                                                    <th>last</th>
                                </tr>
                            </thead>";
                }
            }
        ?>
    </div>
</section>

<script>

console.log("In the script open");


var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {


        editor = new $.fn.dataTable.Editor( {
            ajax: "infograb.php",
            table: "#example",
            fields: [ {
                    label: "Social#:",
                    name: "ssn"},
                                    {
                    label: "DOB:",
                    name: "dob"},
                                    {label: "First Name:",
                    name: "fn"},
                                    {
                    label: "Middle Initial:",
                    name: "mi"},
                                    {
                    label: "Last Name:",
                    name: "ln"
                        }
            ]
    } );


    $('#example').on( 'click', 'tbody td', function (e) {
        var index = $(this).index();

        if ( index === 1 ) {
            editor.bubble( this, ['fn', 'mi', 'ln'], {
                title: 'Edit name:'
            } );
        }
        else if ( index === 2 ) {
            editor.bubble( this, {
                buttons: false
            } );
        }
        else if ( index === 3 ) {
            editor.bubble( this );
        }

    } );

        var testData = [{
                  "ssn": "98727748",
                  "dob": "2016-02-05",
                  "fn": "jake",
                                    "mi": "a",
                                    "ln": "butler"
                }];

    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax:{
                    url: 'infograb.php',
                    type: 'POST',
                    data: {
                    json: JSON.stringify({ "data": testData })
                    },
                    dataSrc: 'data'
                        },
        columns: [
                        {//sets the checkbox
                            data: null,
                            defaultContent: '',
                            className: 'select-checkbox',
                            orderable: false
                         },
                        { data: "dob" },
            { data: "ssn" },
                        { data: "fn" },
                        { data: "mi" },
                        { data: "ln" },


        ],
        order: [ 1, 'asc' ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );





console.log("End script");


</script>

<?php
    include_once 'footer.php';
?>

这是查询数据库并返回（据称）json数据的php文件

<?php
include_once 'dbconn.php';


 $rows = array();

 $sql = "SELECT * FROM employee";
 $result = $conn->query($sql) or die("cannot write");
 while($row = $result->fetch_assoc()){
    $rows[] = $row;
 }

 echo "<pre>";
 print json_encode(array('data'=>$rows));
 echo "</pre>";

 ?>

我已经在这里待了大约24个小时了，我觉得我在这里遇到了傻瓜错误，我无法理解。此时任何帮助都会让我在悬崖上说话。

Answer 1

数据表可能很痛苦，确保您尽可能多地阅读他们提供的文件是值得的。

我可以看到在运行代码时运行2个问题但没有运行测试。第一个是infograb.php不会保存发送给它的任何数据，因为它只是在加载时返回数据。其次，您正在使用数据表的启动代码来尝试发送数据（可能是为了内联编辑，因为您似乎不需要为请求的数据发送任何变量）。我的第一步是将其退回一步：

ajax:{
       url: 'infograb.php',
     },

应该回到

html {
    height: 100%;
}

    body {
        margin: 0;
        text-align: center;
        height: 80%;
    }
    footer {
        background-color: #003162;
        padding: 5px;
        height: 20%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 80%;
    }

从infograb.php中删除pre标签，因为它们是不必要的。

那应该将数据加载到表中。然后，您可以开始编辑。

值得阅读和记录：

Ajax sourced data

PHP libraries

DataTables Editor 1.7.3 - PHP 5.3+ libraries

DataTable不接受来自数据库的json

1 个答案: