0

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

})

1 Answer 1

2

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 
         });
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.