KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Filter on datatable #2625

Open DVBI opened this topic on on Mar 31, 2022 - 1 comments

DVBI commented on Mar 31, 2022

I want my datatable to be filtered by by multiselect, Lets say I want to add an filter of status, then If I selects only pending there, then datatable should show all the data only with pending status,

Sebastian Morales commented on Apr 1, 2022

Pls check this column filtering example of DataTables:

https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

You could convert it to datagrid/DataTables php like this:

<style>
    thead input {
        width: 100%;
    }
</style>
<?php
DataTables::create(array(
    "name" => "example",
    ...
    "options" => array(
        "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();
 
                            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);
                        });
                });
        }",
    ),
    "onReady" => "function() {
        $('#example thead tr')
        .clone(true)
        .addClass('filters')
        .appendTo('#example thead'); 
    }",
));

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

DataGrid