从下拉列表中更改不同的表 (onChange)

Posted 2023-04-13

【中文标题】从下拉列表中更改不同的表 (onChange)

【英文标题】：Changing different tables from dropdown (onChange)

【发布时间】：2020-03-27 23:17:17

【问题描述】：

我正在尝试从 onChange 下拉菜单中隐藏和显示乘法表。但是我有很多表，更改表需要很长时间这是更改表的 js 代码：

$(document).ready(function () 
$('#Table1 , #Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').DataTable().destroy();
$('#Table1 , #Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').hide();

$("#dropdown").on('change', function () 
    var tableId = $(":selected", this).val();
    if (tableId == 'table0') 
        $('#Table1 , #Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').DataTable().destroy();
        $('#Table1 , #Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').hide();
     else if (tableId == 'Table1') 
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').DataTable().destroy();
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table6 , #Table7 , #Table8').hide();
        $('#Table1').DataTable();
        $('#Table1').show();
        Table1F();
     else if (tableId == 'Table6') 
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table1 , #Table7 , #Table8').DataTable().destroy();
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table1 , #Table7 , #Table8').hide();
        $('#Table6').DataTable();
        $('#Table6').show();
        Table6F();
     else if (tableId == 'Table7') 
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table1 , #Table6 , #Table8').DataTable().destroy();
        $('#Table2 , #Table3 , #Table4 , #Table5 , #Table1 , #Table6 , #Table8').hide();
        $('#Table7').DataTable();
        $('#Table7').show();
        Table7F();
     else if (tableId == 'Table5') 
        $('#Table2 , #Table3 , #Table4 , #Table7 , #Table1 , #Table6 , #Table8').DataTable().destroy();
        $('#Table2 , #Table3 , #Table4 , #Table7 , #Table1 , #Table6 , #Table8').hide();
        $('#Table5').DataTable();
        $('#Table5').show();
        Table5F();
     else if (tableId == 'Table4') 
        $('#Table2 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table8').DataTable().destroy();
        $('#Table2 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table8').hide();
        $('#Table4').DataTable();
        $('#Table4').show();
        Table4F();
    
    else if (tableId == 'Table8') 
        $('#Table2 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').DataTable().destroy();
        $('#Table2 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').hide();
        $('#Table8').DataTable();
        $('#Table8').show();
        Table8F();
    
    else if (tableId == 'Table2') 
        $('#Table8 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').DataTable().destroy();
        $('#Table8 , #Table3 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').hide();
        $('#Table2').DataTable();
        $('#Table2').show();
        Table2F();
    
    else if (tableId == 'Table3') 
        $('#Table8 , #Table2 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').DataTable().destroy();
        $('#Table8 , #Table2 , #Table5 , #Table7 , #Table1 , #Table6 , #Table4').hide();
        $('#Table3').DataTable();
        $('#Table3').show();
        Table3F();
    
);

有什么方法可以自定义这部分代码，让它更快，代码更少。我正在使用 DataTables，所以我也需要销毁它，这段代码可以工作，但速度很慢。

编辑：

function Table1F() 
var url = TABLE1_URL + '?AllRows=True&Fields=Data1&Fields=Data2&Fields=Data3&Fields=Data4&Fields=Data5&Fields=Data6&Fields=Data7&Fields=Data8';
$.ajax(
    url: url,
    dataType: 'json',
    type: 'GET',
    contentType: 'application/json',
    success: function (data, textStatus, jQxhr) 
        $("#Table1").DataTable(
            destroy: true,
            aLengthMenu: [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "All"]
            ],
            iDisplayLength: 25,
            dom: '<"html5buttons"B>lTfgitp',
            buttons: [
                 extend: 'excel', title: 'data' 
            ],
            data: data.List,
            processing: true,
            columns: [
                 data: 'Data1' ,
                 data: 'Data2' ,
                 data: 'Data3' ,
                 data: 'Data4' ,
                 data: 'Data5' ,
                 data: 'Data6' ,
                 data: 'Data7' ,
                 data: 'Data8' ,
            ],
        );
    ,
    error: function (jqXhr, textStatus, errorThrown) 
        swal("Error", errorThrown, "error");
    
);

这是我的功能之一，以及我如何从服务器调用数据 所有其他功能都相同，但数据不同。

【问题讨论】：

如果您只想显示/隐藏表格，为什么还要继续销毁和重新创建表格？

每张桌子有多少个？您是在前端加载所有表行，还是启用服务器端处理？

@LuttiCoelho 有些表有超过 1000 行我称之为前端的所有行

这是您的问题之一。处理太多行时，Jquery 数据表不是很快。我建议您将表格更改为每个表格最多显示 100 行，并在后端进行艰苦的工作（过滤、分页、排序）。您会感受到性能上的巨大差异。

我建议您尝试@ChrisG 解决方案 jsfiddle.net/khrismuc/tv8eum2z，因为它是快速的方法。如果不销毁并重新创建表，您将拥有更少的操作，这将消耗大量内存。 但是正如我之前所说，jquery 数据表在处理大量数据时会非常慢。所以在解决了销毁和重新创建的问题后，我建议你用服务器端处理datatables.net/examples/data_sources/server_side

处理每个表数据

【参考方案1】：

要回答你的问题，你可以这样做

$("#dropdown").on('change', function () 
    var tableId = $(":selected", this).val();
    var selectedTable = $('#'+ $(":selected", this).val());
    var allTables = $('table');

    allTables.DataTable().destroy()
    allTables.hide()

    selectedTable.DataTable()
    selectedTable.hide()

    eval(tableId+"F()")

注意：我个人认为您的设计存在根本问题。您不应该像这样使用多个表，因为它会对性能造成巨大影响。根据要求使用具有不同数据的单个表。

【讨论】：

谁投反对票，请在投反对票前提供理由

是我。每次选择更改时，您仍然调用DataTable()，因此这根本无法解决缓慢问题。使用eval() 是不行的。

我刚刚发布了 OP 要求的简化版本。由于设计本身存在缺陷，因此不是一个全面的解决方案

OP 说他们的代码可以工作，但速度很慢。您重写了代码以使其更短，从而保持缓慢。恰恰不是 OP 问题的答案。

【参考方案2】：

使用 css 将所有表格设置为隐藏，然后使用 javascript 代码更改 css

 document.getElementById("#table").style.display = "none"

并将所有表ID放入一个数组中