Question

我正在使用DataTables创建一个表。我需要能够从表中选择多个（〜200）行以放入输出中。我想实现此处为复选框描述的排序功能：

Keep enabled checkboxes at top of jQuery DataTables, despite sort order

但是使用来自Ajax的数据时。

最重要的是，当选中的项目移到顶部时，我希望出现两个表单输入...或者将Class和Category列显示为表单输入并具有默认值会更容易从数据库中填充。（最好是选择一个具有所有当前数据库可能性的下拉菜单，但可以选择键入自定义值。）

https://datatables.net/examples/api/form.html

*加上这个，所以我记得明天回来看看 http://jsfiddle.net/obmghyo7/

从那里，提交后，选中的任何行都将“名称”，“类”，“类别”保存到csv输出中。

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" media="screen" />
<script charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
</head>
</html>
<body>
<table id="samples" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th></th>
                <th>Sample Name</th>
                <th>Region/Program</th>
                <th>Class</th>
                <th>Category</th>
                <th>QC_comment</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td></td>
                <td>Sample Name</td>
                <td>Region/Program</td>
                <td>Class</td>
                <td>Category</td>
                <td>QC_comment</td>
            </tr>
        </tfoot>
    </table>
    </form>
<script type="text/javascript" charset="utf8" src="JS/datatables.js"></script>
</body>

JQUERY（datatables.js）

$(document).ready(function() {

    $('#samples').DataTable( {
            columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets: 0,
            data: null,
            defaultContent: ''
        } ],
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]],

        "processing": true,

        "serverSide": true,

        "pageLength": -1,

        "lengthMenu": [[100, 250, 500, -1], [100, 250, 500, "All"]],

        "ajax": "datatables.php"

    } );


} );

PHP（datatables.php）

<?php

$table = 'sample';

$primaryKey = 'Name';

$columns = array(
    array( 'db' => 'Name', 'dt' => 1 ),
    array( 'db' => 'Region', 'dt' => 2 ),
    array( 'db' => 'Class', 'dt' => 3 ),
    array( 'db' => 'Category', 'dt' => 4 ),
    array( 'db' => 'QC_flag','dt' => 6,),
    array('db'  => 'QC_comment','dt' => 5,)
);

// SQL server connection information
$sql_details = array(
    'user' => 'user',
    'pass' => 'password',
    'db'   => 'test',
    'host' => 'xxx.xx.xxx.xx'
);


require( 'ssp.class.php' );

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

使用DataTables添加复选框并使用来自Ajax的数据形成输入

0 个答案: