Question

我有一种会拥有大数据的应用程序，因此我为此选择了服务器端数据表。但是我想在数据附带的行上添加编辑和删除按钮，但是我找不到任何尝试在行上使用按钮的示例，它只是获取列上的数据。

这是我的服务器端脚本

    /*
* DataTables example server-side processing script.
*
* Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as
 * the basis for a large complex system. It is suitable for simple use cases as
 * for learning.
 *
 * See http://datatables.net/usage/server-side for full details on the server-
 * side processing requirements of DataTables.
 *
 * @license MIT - http://datatables.net/license_mit
 */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Easy set variables
 */
// DB table to use
$table = 'category';

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

// 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' => 'cid', 'dt' => 0 ),
    array( 'db' => 'cname',  'dt' => 1 ) 
    );


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


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * If you just want to use the basic configuration for DataTables with PHP
 * server-side, there is no need to edit below this line.
 */

require( 'ssp.class.php' );

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

这是我的html

    <table class="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
                                <thead>
                                    <tr>
                                        <th>
                                            cid
                                        </th>
                                        <th>
                                            cname
                                        </th>
                                    </tr>
                                </thead>
                            </table>

这是我的jquery脚本

$(document).ready(function() {
$('#m_table_1').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "data.php",
       dom: 'Bfrtip',
    buttons: [
     'copyHtml5',
       'excelHtml5',
      'csvHtml5',
       'pdfHtml5'
   ]
} );
 } );

因为在数据表示例中，有一种方法可以显示db中的列名，但是我又如何让它知道添加2个其他custum列，它们将在其数据中包含。

编辑按钮：

<button value="'.$category['cid'].'" class="btn btn-primary get" id="get'.$category['cid'].'">edit </button>

删除按钮：

<button class="btn btn-danger" id="del'.$category['cid'].'" value="'.$category['cid'].'" type="button">Delete</button>

这是我想要的桌子。

<table class="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
                                <thead>
                                    <tr>
                                        <th>
                                            cid
                                        </th>
                                        <th>
                                            cname
                                        </th>
                                        <th>
                                            edit
                                        </th>
                                        <th>
                                            delete
                                        </th>
                                    </tr>
                                </thead>
                            </table>

我想在每一行上都具有编辑和删除列，这些列将具有特定的ID，最后是主键ID。由于我对ajax完全陌生，因此我创建了通过ajax更新和删除数据的按钮，但是我只能使用简单的数据表显示它们，更新后我无法重新加载它们，或者删除没有页面刷新的任何行。因此，我需要服务器端脚本，但是似乎必须有一种方法来添加带有按钮的自定义列，并使它们的ID与列的主键相同。

Answer 1

您可以使用“ columnDef”选项。看看this

$(document).ready(function() {
  var table = $("#m_table_1").DataTable({
    processing: true,
    serverSide: true,
    ajax: "data.php",
    dom: "Bfrtip",
    buttons: ["copyHtml5", "excelHtml5", "csvHtml5", "pdfHtml5"],
    columnDefs: [
      {
        targets: 3, // edit column order
        data: null,
        defaultContent: "<button class='edit'>Edit!</button>"
      },
      {
        targets: 4, // delete column order
        data: null,
        defaultContent: "<button class='delete'>Delete!</button>"
      }
    ]
  });
});

$("#m_table_1").on("click", "button.edit", function() {
  var data = table.row($(this).parents("tr")).data();
  alert(data[0] + " I'm editing");
});
$("#m_table_1").on("click", "button.delete", function() {
  var data = table.row($(this).parents("tr")).data();
  alert(data[0] + " I'm Delete");
});

将custum参数传递到数据表的服务器端数据。

1 个答案: