Question

Background: I have a jQuery Datatable with 53x columns. The first column is the user name and is non-editable. The next 52 columns represent weeks of the year, which each need to be editable. They ALL contain exactly the same options.

Problem: Is there a better way to define all 52 weeks, without having to “copy&paste” the column data 52 times?

My code:

$(document).ready( function () {
  $('#example').dataTable().makeEditable({
                    sUpdateURL: function(value, settings)
                            {
                                    return(value);
                            },
                    "aoColumns": [
                        null,
                        {
                        tooltip: 'Click to change leave',
                        loadtext: 'loading...',
                        type: 'select',
                        onblur: 'cancel',
                        submit: 'Ok',
                        data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}",
                        loadtype: 'GET'
                        },
                        {
                        tooltip: 'Click to change leave',
                        loadtext: 'loading...',
                        type: 'select',
                        onblur: 'cancel',
                        submit: 'Ok',
                        data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}",
                        loadtype: 'GET'
                        },

                 {REPEAT 49 more times}

                        {
                        tooltip: 'Click to change leave',
                        loadtext: 'loading...',
                        type: 'select',
                        onblur: 'cancel',
                        submit: 'Ok',
                        data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}",
                        loadtype: 'GET'
                        } ]                 
    });

})

Answer 1

Build the columns array using a loop then use it in the aoColumns property of the configuration object passed to dataTables.

$(document).ready( function () { 

         // columns array
         var aoColumns = [];
         aoColumns.push(null);

         for(var i=0;i<52; i++) {
         var column = { 
               tooltip: 'Click to change leave', 
               loadtext: 'loading...', 
               type: 'select', 
               onblur: 'cancel', 
               submit: 'Ok', 
               data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}", 
               loadtype: 'GET' 
               };
               aoColumns.push(column);
         }

         $('#example').dataTable().makeEditable({ 
              sUpdateURL: function(value, settings) 
              { 
                   return(value); 
              }, 
              "aoColumns": aoColumns 
         });