Clever Geek Handbook

Can this JavaScript be simplified?

I have a page containing several DataTables, all with the same setup and server side script processing.

The code works, but it seems cumbersome for what it does.

Can this be simplified somehow?

<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>
+3


source to share


4 answers


Another way is to give your data a specific class and put the product group id as an attribute in the ie table

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


This way you don't need to keep track of the total number of tables whenever you add or remove tables, and you can have spaces in your ids

$('.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
    });    
});
+4


source


One way to simplify the following



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


source


You can remove duplicate code by extracting all the usual stuff into a function.

        // 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);
        }
+1


source


There are many good answers already, but this is good too:

[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
            } );
    });
+1


source






More articles:


All Articles