这个JavaScript可以简化吗？

Question

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

代码可以正常运行但它看起来很笨重.

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

<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);
}