使用服务器端数据表的下拉选择 | PHP, SQL 服务器

Question

在服务器端数据表中选择下拉菜单时出现问题。这是基于此示例：https://datatables.net/examples/api/multi_filter_select.html。

我有关于如何修复它的指南，但我不知道如何设置它。 https://datatables.net/forums/discussion/48780/server-side-column-filtering-with-drop-down-get-all-options

我正在使用 SQL Server 2012、XAMPP，并通过 SQLSRV 连接。

数据表似乎工作正常。

它将所有结果过滤到下拉列表中。

我的问题是，当我选择其中一个下拉菜单时，它没有显示任何结果（未找到匹配项）。

这是我的代码。

为了我的桌子。

<div class="box-body">
    <table id="example" class="table table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Series No</th>
                <th>Account Type</th>
                <th>Tools</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Series No</th>
                <th>Account Type</th>
                <th>Tools</th>
            </tr>
        </tfoot>
    </table>
</div>

这是我的脚本

<script>
$(function() {
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "account_type_table.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "seriesno" },
            { data: "accounttype" },
            { "data": "seriesno", "name": " ", "autoWidth": true, "render": function (data, type, full, meta) {
                return "<button class='btn btn-success btn-sm btn-flat edit' data-id='"+full.seriesno+"'><i class='fa fa-edit'></i> Edit</button> <button class='btn btn-danger btn-sm btn-flat delete' data-id='"+full.seriesno+"'><i class='fa fa-trash'></i> Delete</button>";}
                        }
        ],
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        },
        select: false,
        buttons: [],
    } );
} );

这是我的服务器端表。

<?php
/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "../dataTables/table_account_type/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'accounttype' )
    ->fields(
        Field::inst( 'seriesno' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A first name is required' ) 
            ) ),
        Field::inst( 'accounttype' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A last name is required' )  
            ) )
            )
    ->process( $_POST )
    ->json();
?>

这里似乎有什么问题？是不是因为我的过滤器只有在数据出现在代码本身时才起作用，并且它不能识别来自服务器端的数据？

Answer 1

您所指的Example 具有静态数据，并且在 UI 本身中进行过滤。

但在您的情况下，您使用的是 服务器端处理，这意味着 排序逻辑应该由服务器端代码处理。

initComplete 方法考虑 API 返回的数据并填充组合框，这是它需要做的。

按照您的要求进行操作

1. 如example 中所述，不要使用服务器端处理并一次性加载所有数据

2. 如果需要使用Server端处理

   您可能需要自定义 initComplete 函数来调用另一个 API，该 API 返回所有唯一列数据并加载它。

   注意：您可能还需要为“当您从组合框中选择一个值”编写逻辑

   我确信 Datatable 会将选定的组合值作为参数添加到 API，并基于此您需要在后端处理数据并返回适当的响应。