javascript - DataTables请求未知参数错误(编辑器JS/CSS)

Question

抱歉，如果这是重复的，但我正在 DataTables API 的帮助下构建 CRUD 应用程序。我正在尝试手动编写添加、编辑和删除功能的代码，但 DataTables 的人说最好使用编辑器。因此，我下载了 JS 和 CSS 的 15 天试用版。

我只剩下 8 天的时间来使用它，但在设置时遇到了问题。我的服务器数据没有从 DataTables 中提取，因为我收到此错误:

DataTables 警告:表 id=dataTable - 请求第 0 行第 0 列的未知参数“名称”。有关此错误的详细信息，请参阅 http://datatables.net/tn/4

我不确定这意味着什么，所以我单击了出现的链接，但它没有多大意义，因为我试图确保表内有正确的列。我不确定还有什么可能导致问题。我还运行了调试器，但无法将其上传给他们，因为我的网页上传配置超时。

这是我的 javascript 代码和 html 表代码:

/*
 * Editor client script for DB table members
 * Created by http://editor.datatables.net/generator
 */

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'api/server.php',
        table: '#dataTable',
        fields: [       
            {
                "label": "Name:",
                "name": "name"
            },
            {
                "label": "Residential Address:",
                "name": "residential_address"
            },
            {
                "label": "Mailing Address:",
                "name": "mailing_address"
            },
            {
                "label": "Precinct:",
                "name": "precinct"
            },
            {
                "label": "Age:",
                "name": "age"
            },
            {
                "label": "Ethnicity:",
                "name": "ethnicity"
            },
            {
                "label": "Gender:",
                "name": "gender"
            },
            {
                "label": "Party:",
                "name": "party",
                "def": "REP"
            },
            {
                "label": "Race:",
                "name": "race"
            },
            {
                "label": "Phone:",
                "name": "phone"
            }
        ]
    } );

    var table = $('#dataTable').DataTable( {
        dom: 'Bfrtip',
        processing: true,
        serverSide: true,
        order: [],
        pageLength: 25,
        ajax: 'api/server.php',
        columns: [      
            {
                "data": "name"
            },
            {
                "data": "residential_address"
            },
            {
                "data": "mailing_address"
            },
            {
                "data": "precinct"
            },
            {
                "data": "age"
            },
            {
                "data": "ethnicity"
            },
            {
                "data": "gender"
            },
            {
                "data": "party"
            },
            {
                "data": "race"
            },
            {
                "data": "phone"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );
} );

}(jQuery));

 <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Residential Address</th>
                      <th>Mailing Address</th>
                      <th>Precinct</th>
                      <th>Age</th>
                      <th>Ethnicity</th>
                      <th>Gender</th>
                      <th>Party</th>
                      <th>Race</th>
                      <th>Phone Number</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <th>Name</th>
                      <th>Residential Address</th>
                      <th>Mailing Address</th>
                      <th>Precinct</th>
                      <th>Age</th>
                      <th>Ethnicity</th>
                      <th>Gender</th>
                      <th>Party</th>
                      <th>Race</th>
                      <th>Phone Number</th>
                    </tr>
                  </tfoot>
                </table>

这是我的 server.php 文件:

<?php

// DB table to use
$table = 'members';

// Table's primary key
$primaryKey = 'id';

// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
    //array( 'db' => 'id', 'dt' => 0 ),
    array( 'db' => 'name',  'dt' => 1 ),
    array( 'db' => 'residential_address', 'dt' => 2 ),
    array( 'db' => 'mailing_address', 'dt' => 3 ),
    array( 'db' => 'precinct', 'dt' => 4),
    array( 'db' => 'age', 'dt' => 5 ),
    array( 'db' => 'ethnicity',  'dt' => 6 ),
    array( 'db' => 'gender', 'dt' => 7 ),
    array( 'db' => 'party', 'dt' => 8 ),
    array( 'db' => 'race', 'dt' => 9 ),
    array( 'db' => 'phone', 'dt' => 10 )        
);

// SQL server connection information
$sql_details = array(
    'user' => 'root',
    'pass' => '',
    'db'   => 'ccrp_db',
    'host' => 'localhost'
);

require( 'ssp.class.php' );

echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
?>

如果需要任何其他代码，请告诉我。如果我手头有，我很乐意分享。

Answer 1

用简单的语言说出来

您传递给数据表的数据没有任何带有 attr 'name' 的数据

同样的解释here

如果这没有帮助，请从 'api/server.php' 添加示例数据

例如:

{
    "residential_address" : "Address",
    "mailing_address" : "MailAddress",
    "userName" : "MyName"   
}

对于上述情况，如果您尝试

columns: [      
    {
        "data": "name"
    }
]

你会得到同样的错误。

要解决此问题，您需要将数据字段更改为 "data": "userName"

或添加名称为 JSON

{
    "residential_address" : "Address",
    "mailing_address" : "MailAddress",
    "name" : "MyName"   
}

希望这有帮助。

编辑 1:

关于提供更多信息。看来索引是错误的。必须是

array( 'db' => 'name',  'dt' => 0 ),
array( 'db' => 'residential_address', 'dt' => 1 ),
array( 'db' => 'mailing_address', 'dt' => 2 ),
array( 'db' => 'precinct', 'dt' => 3),
array( 'db' => 'age', 'dt' => 4 ),
array( 'db' => 'ethnicity',  'dt' => 5 ),
array( 'db' => 'gender', 'dt' => 6 ),
array( 'db' => 'party', 'dt' => 7 ),
array( 'db' => 'race', 'dt' => 8 ),
array( 'db' => 'phone', 'dt' => 9 )   

引用this example如果仍然不起作用，请了解更多详细信息