使用 serverSide 处理 DataTable 列筛选器:true- 不工作

DataTable Column Filter Processing with serverSide: true- Not working

提问人:Sahin Ahmed 提问时间:7/25/2023 更新时间:7/25/2023 访问量:27

问:

我是 ausind datable serverSide true,但是当使用列过滤器时,它不起作用,有什么方法可以使 clumn 过滤器与服务器端一起工作。.

工作代码: $(document).ready(函数 () {

        // Setup - add a text input to each footer cell
        $('#member_list thead tr')
            .clone(true)
            .addClass('filters')
            .appendTo('#member_list thead');

        // table denoted 
        var table = $('#member_list').DataTable({

            orderCellsTop: true,
            fixedHeader: true,
            "search": {
                "regex": true
            },

            processing: true,
            // serverSide: true,// NOW IT IS WORKING BUT I WANT SERVERSIDE PROCESS
            ajax: {
                url: './elements/ssp/use-data.php',
                type: 'POST'
            },
            dom: '<"row text-left"<"col-md-2"B><"col-md-4"l><"col-md-6""fr>>t<"text-light"i>p',
            "scrollX": true,              
            buttons: [                   
                'excel', 'print', 'selectAll', 'selectNone',                  
            ],
            language: {
                buttons: {
                    selectAll: '<input type="checkbox" checked>',
                    selectNone: 'x',                        
                }
            },
            select: {
                style: 'multi',
                selector: 'td:first-child'
            },
            "lengthMenu": [
                [10, 100, 500, 1000],
                [10, 100, 500, 1000]
            ],
            initComplete: function () {
                var api = this.api();
                // For each column
                api.columns().eq(0).each(function (colIdx) {
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq($(api.column(colIdx).header()).index());
                    var title = $(cell).text();
                    $(cell).html('<input type="text" placeholder="' + title + '" />');
                    // On every keypress in this input
                    $('input', $('.filters th').eq($(api.column(colIdx).header()).index()))
                        .off('keyup change')
                        .on('keyup change', function (e) {
                            e.stopPropagation();
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();
                            console.log('regexr:'+regexr+ 'value:'+ $(this).attr('title', $(this).val()));
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search((this.value != "") ? regexr.replace('{search}', '(((' + this.value + ')))') : "", this.value != "", this.value == "")
                                .draw();
                            $(this).focus()[0].setSelectionRange(cursorPosition, cursorPosition);
                        });
                });

            },
            
        });



        // table.buttons().container()
        //     .appendTo($('.col-sm-6:eq(0)', table.table().container()));

    });
</script>

非工作代码:

$(document).ready(函数 () {

        // Setup - add a text input to each footer cell
        $('#member_list thead tr')
            .clone(true)
            .addClass('filters')
            .appendTo('#member_list thead');

        // table denoted 
        var table = $('#member_list').DataTable({

            orderCellsTop: true,
            fixedHeader: true,
            "search": {
                "regex": true
            },

            processing: true,
            serverSide: true,// NOT WORKING BUT I WANT SERVERSIDE PROCESS
            ajax: {
                url: './elements/ssp/use-data.php',
                type: 'POST'
            },
            dom: '<"row text-left"<"col-md-2"B><"col-md-4"l><"col-md-6""fr>>t<"text-light"i>p',
            "scrollX": true,              
            buttons: [                   
                'excel', 'print', 'selectAll', 'selectNone',                  
            ],
            language: {
                buttons: {
                    selectAll: '<input type="checkbox" checked>',
                    selectNone: 'x',                        
                }
            },
            select: {
                style: 'multi',
                selector: 'td:first-child'
            },
            "lengthMenu": [
                [10, 100, 500, 1000],
                [10, 100, 500, 1000]
            ],
            initComplete: function () {
                var api = this.api();
                // For each column
                api.columns().eq(0).each(function (colIdx) {
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq($(api.column(colIdx).header()).index());
                    var title = $(cell).text();
                    $(cell).html('<input type="text" placeholder="' + title + '" />');
                    // On every keypress in this input
                    $('input', $('.filters th').eq($(api.column(colIdx).header()).index()))
                        .off('keyup change')
                        .on('keyup change', function (e) {
                            e.stopPropagation();
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();
                            console.log('regexr:'+regexr+ 'value:'+ $(this).attr('title', $(this).val()));
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search((this.value != "") ? regexr.replace('{search}', '(((' + this.value + ')))') : "", this.value != "", this.value == "")
                                .draw();
                            $(this).focus()[0].setSelectionRange(cursorPosition, cursorPosition);
                        });
                });

            },
            
        });



        // table.buttons().container()
        //     .appendTo($('.col-sm-6:eq(0)', table.table().container()));

    });
</script>

ServerSide:true----- not woking 没有 ServerSide,事情就很糟糕

但是我想在服务器端进程中处理事情,以便减少大量数据的初始加载时间。

排序 数据表 筛选 服务器端

评论


答: 暂无答案