CODEWITHSUNDEEP
javascriptjquery
Jack
Jack

Reputation: 513

Can this JavaScript be simplified?

I have a page containing multiple DataTables all using the same settings and server side processing script.

The code works but it seems bulky for what it is doing.

Is it possible to simplify it 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>

Upvotes: 2

Views: 120

Answers (4)

Ajoy
Ajoy

Reputation: 1848

You can remove repeated code by taking out all the common 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);
        }

Upvotes: 1

Daniel Conde Marin
Daniel Conde Marin

Reputation: 7742

There are plenty of good answers already, but this is neat as well:

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

Upvotes: 1

FuzzyTree
FuzzyTree

Reputation: 32392

Another way is to give your datatables a certain class and to put the product group id as an attribute on the table i.e.

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

This way you don't have to keep track of the total # of tables whenever you add or remove tables and you can have gaps 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
    });    
});

Upvotes: 3

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28445

One way of simplifying is 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);
}

Upvotes: 6

Related Questions