Question

我在一页中有9个数据表，并使用引导程序选项卡将它们分开。有些标签仅使用相同的数据表，只是根据单击的标签来更改内容（这是为了模仿我们以前使用google电子表格的做法，一个示例是不同的工作表具有相同的列但具有不同的数据，即学生不同的分支）。

我在所有数据表中都使用了数据表固定列，因此我非常依赖它。当我多次更改制表符时，固定列将被卡住，数据和对齐方式正确，但是，但是当我单击固定列上方的排序按钮时，后面的数据实际上将进行排序，但固定列数据不会跟随，便出现了问题当我使用inspect元素删除固定列时，确认了这一点。另外，当我搜索表中不存在的内容时，固定行的一行包含一个数据，这将阻止结果“找不到匹配的记录”。同样，每次我单击一个选项卡时，它都会为其刷新数据表。


var columns_students = [
        {data: 'name', name: 'name'},
        {data: 'contact', name: 'contact'},
        {data: 'program.name', name: 'program'},
        {data: 'school.name', name: 'school'},
        {data: 'benefactor.name', name: 'benefactor'},
        {data: 'gender', name: 'gender'},
        {data: 'age', name: 'age'},
        {data: 'course.name', name: 'course'},
        {data: 'email', name: 'email'},
        {data: 'date_of_signup', name: 'date_of_signup'},
        {data: 'referral.fname', name: 'referral'},
        {data: 'remarks', name: 'remarks'},
        {data: "action", orderable:false,searchable:false}
    ]

var columnDefs_students = [
    { width: 220, targets: 0 }, //name
    { width: 90, targets: 1 }, //contact
    { width: 130, targets: 2 }, //program
    { width: 130, targets: 3 }, //school
    { width: 130, targets: 4 }, //benefactor
    { width: 60, targets: 5 }, //gender
    { width: 45, targets: 6 }, //age
    { width: 200, targets: 7 }, //course
    { width: 200, targets: 8 }, //email
    { width: 120, targets: 9 }, //signup
    { width: 120, targets: 10 }, //referral
    { width: 250, targets: 11 }, //remarks
    { width: 150, targets: 12 }, //action
    {defaultContent: "", targets: "_all"}
]


function refresh_student_branch(){
        departure_year = $('#year_select').val();
        departure_month = $('#month_select').val();

        students_branch = $('#students_branch').DataTable({
            stateSave: true,
            stateSaveCallback: function(settings,data) {
                localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
            },
            stateLoadCallback: function(settings) {
                return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
            },
            stateLoadParams: function( settings, data ) {
                if (data.order) delete data.order;
            },
            processing: true,
            destroy: true,
            scrollX: true,
            scrollCollapse: true,
            fixedColumns: true,
            ajax: {
                url: '/student_branch',
                data: {
                    current_branch: current_branch,
                    departure_year: departure_year,
                    departure_month: departure_month
                }
            },
            columnDefs: columnDefs_students,
            columns: columns_students,
            order: [[3,'asc']]
        });

    }


$('.branch_pick').on('click', function(){
    current_branch = $(this).text();

    showMonthSelect();
    refresh_student_branch();
});

这是我重新初始化数据表的方式，您可以看到它在javascript函数内部，因此每次想刷新它时，我都可以在其他函数中调用它（尤其是单击选项卡）。

我认为这可能是因为我如何重新初始化数据表，尤其是对于许多人而言。除此功能外，其他所有功能都很流畅，这是最重要的。

使用多个数据表时，数据表固定列卡住了

0 个答案: