像Excel列过滤器一样的数据表列过滤器

Question

我正在使用 ASP.NET Core 6 MVC。我有一个如下所示的表格：

<div class="card-body">
     <table class="table display table-bordered" id="DATATABLE"></table>         
</div>

我正在寻找一种拥有这样的列标题的方法：

我尝试过这样。

       $("#DATATABLE").DataTable({
                      serverSide: true,
                      filter: true,
                      searchDelay: 1000,
                      scrollY: StaticData.TABLE_HEIGHT + 'px',
                      lengthMenu: StaticData.TABLE_PAGE_SIZE,            
                      scrollCollapse: true,
               ajax: {
                   url: '/STUD_MANAGEMENT/LoadStudents',
                  type: 'GET',
                  datatype: 'json',
                headers: { 'RequestVerificationToken': 'your json token' },                
               dataSrc: (json) => {
                   json = json.data;
                
                for (var i = 0, ien = json.length; i < ien; i++) {

                    json[i]['isactive'] = '<input type="checkbox">'                        
                            `;
                }
                return json;
            }
        },
        columnDefs: [{ className: "dt-center", targets: [7], width: '2%', }],
        columns: [
            { data: 'STUD_ID', title: 'STUD ID', autoWidth: false, visible : false },
            { data: 'NAME', title: 'Name', autoWidth: true },
            { data: 'CLASS', title: 'Class', autoWidth: true },             
            { data: 'isactive', title: 'Is Active ?', autoWidth: false, orderable: false },                
            { data: 'USER', title: 'User', autoWidth: true },
            { data: 'DATE', title: 'Date', autoWidth: true },               
        ],
    });// datatable

Answer 1

您可以尝试下面的代码来实现活动非活动字段上的过滤器：

$("#DATATABLE").DataTable({
    serverSide: true,
    filter: true,
    searchDelay: 1000,
    scrollY: StaticData.TABLE_HEIGHT + 'px',
    lengthMenu: StaticData.TABLE_PAGE_SIZE,            
    scrollCollapse: true,
    ajax: {
        url: '/STUD_MANAGEMENT/LoadStudents',
        type: 'GET',
        datatype: 'json',
        headers: { 'RequestVerificationToken': 'your json token' },
        dataSrc: (json) => {
            json = json.data;

            for (var i = 0, ien = json.length; i < ien; i++) {
                json[i]['isactive'] = '<input type="checkbox">'                        
            }
            return json;
        }
    },
    columnDefs: [{ className: "dt-center", targets: [7], width: '2%' }],
    columns: [
        { data: 'STUD_ID', title: 'STUD ID', autoWidth: false, visible: false },
        { data: 'NAME', title: 'Name', autoWidth: true },
        { data: 'CLASS', title: 'Class', autoWidth: true },             
        { data: 'isactive', title: 'Is Active ?', autoWidth: false, orderable: false },                
        { data: 'USER', title: 'User', autoWidth: true },
        { data: 'DATE', title: 'Date', autoWidth: true },               
    ],
    headerCallback: function(thead, data, start, end, display) {
        $(thead).find('th').eq(3).html(
            '<div>' +
                '<input type="checkbox" id="filter-active" /> Active<br>' +
                '<input type="checkbox" id="filter-non-active" /> Non Active<br>' +
                '<input type="checkbox" id="filter-all" checked /> ALL' +
            '</div>'
        );
    },
    drawCallback: function(settings) {
        // Update checkbox state based on current filters applied you need to implement the logic for this based on your filter state
    }
});

$('#filter-active').on('change', function() {
    // Apply filter for active
});

$('#filter-non-active').on('change', function() {
    // Apply filter for non-active
});

$('#filter-all').on('change', function() {
    // Apply filter for all
});