Question

我有一个包含多个DataTable的页面，它们都使用相同的设置和服务器端处理脚本。

代码可以正常工作，但它似乎很笨重。

是否有可能以某种方式简化它？

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#table1').dataTable( {
            "ajax": {
                    "url": "/old/server_processing/prices.php?ProductGroup=1",
                    "type": "POST"
                    },
            "order": [[ 0, "asc" ]],
            "serverSide": true
        } );
        $('#table2').dataTable( {
            "ajax": {
                    "url": "/old/server_processing/prices.php?ProductGroup=2",
                    "type": "POST"
                    },
            "order": [[ 0, "asc" ]],
            "serverSide": true
        } );
        $('#table3').dataTable( {
            "ajax": {
                    "url": "/old/server_processing/prices.php?ProductGroup=3",
                    "type": "POST"
                    },
            "order": [[ 0, "asc" ]],
            "serverSide": true
        } );
        $('#table4').dataTable( {
            "ajax": {
                    "url": "/old/server_processing/prices.php?ProductGroup=4",
                    "type": "POST"
                    },
            "order": [[ 0, "asc" ]],
            "serverSide": true
        } );
        $('#table5').dataTable( {
            "ajax": {
                    "url": "/old/server_processing/prices.php?ProductGroup=5",
                    "type": "POST"
                    },
            "order": [[ 0, "asc" ]],
            "serverSide": true
        } );
    } );
</script>

Answer 1

简化的一种方法是

function bindDataTableEvent(index) {
 $('#table' + index).dataTable( {
            "ajax": {
                    "url": "/old/server_processing/prices.php?ProductGroup=" + index,
                    "type": "POST"
                    },
            "order": [[ 0, "asc" ]],
            "serverSide": true
        } );
}

for (var i = 1; i <= 5; i++) {
     bindDataTableEvent(i);
}

Answer 2

另一种方法是给你的数据表一个特定的类，并将产品组的id作为一个属性放在表上，即

<table class='data-table' data-product-group-id='1'>

这样，无论何时添加或删除表格，您都不必跟踪表格总数，并且您的ID可能存在空白

$('.data-table').each(function() {
    $(this).dataTable( {
        "ajax": {
                "url": "/old/server_processing/prices.php?ProductGroup=" 
                       + $(this).attr('data-product-group-id'),
                "type": "POST"
                },
        "order": [[ 0, "asc" ]],
        "serverSide": true
    });    
});

Answer 3

您可以通过将所有常见内容删除到函数中来删除重复的代码。

        // Function for common task
        function repeat(num) {
            var tableId = '#table' + num;
            var url = "/old/server_processing/prices.php?ProductGroup=" + num;
            $(tableId).dataTable( {
                "ajax": {
                    "url": url,
                    "type": "POST"
                    },
                "order": [[ 0, "asc" ]],
                "serverSide": true
            });
        }

        // Call the function for required number of turns
        for (var i=1; i<=5; i++) {
            repeat(i);
        }

Answer 4

已经有很多好的答案，但这也很简洁：

[1, 2, 3, 4, 5].forEach(function(i) {
       $('#table' + i).dataTable( {
                "ajax": {
                        "url": "/old/server_processing/prices.php?ProductGroup=" + i,
                        "type": "POST"
                        },
                "order": [[ 0, "asc" ]],
                "serverSide": true
            } );
    });

这个JavaScript可以简化吗？

4 个答案: