DataTables Best Practice Closures

lowrymel

Is the use of closures considered a DataTables best practice?
I do this for every major table attempting to follow the revealing module pattern.

Here is my example.

var member = function(){};  
member.prototype  = (function($, document, window){
 
    var memberName = '';                    // variables formerly global are now private
    var currentRow = null;               
    var previousRow = null;  
    var currentTR= null;                 
    var previousTR = null;  
    
    var oEditor = new $.fn.dataTable.Editor( {
        ajax: "../php/member.php", 
        table: '#member',
        fields: [ 
            {   label: "Company Name:",                 name: "name"            }, 
            {   label: "Type:",     
                        ...
    ]
    } );
    //------------------------------------------------
    var oTable = $('#member').DataTable( {
        dom : 
            "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-5'i><'col-sm-7'p>>",    
        renderer: 'bootstrap',      
        lengthChange: false,
               ...
        }       
    } ); // end of dataTable initialization  

    //------------------------------------------------
    new $.fn.dataTable.Buttons( oTable, {
        buttons: [
             {  extend: "create", 
                className: 'mybtn blue',
                editor: oEditor, 
                action: function ( e, dt, node, config ) {  newRow(  );         }   
            },
              ...
        ]
    });
    //------------------------------------------------
    oTable.buttons().container()
        .appendTo( '#member_wrapper .col-sm-6:eq(0)' );     
    //-------------------------------------------------------------------       
    // Common Editing Functions
    //-------------------------------------------------------------------       
    function newRow( ) {
        myAction = 'new';
        oEditor
            .create()
            .enable( 'name' )
            .enable('type_id')
            .enable( 'active' )
            .title( "<h3 ><div class='editorPad-All text-center text-info bg-info'><h3>Add a New Member record</h3>" )
            .buttons( [ { "className":"btn btn-primary",    "label": "Save",    "fn": function () {  this.submit(); } },
                        { "className":"btn btn-default",    "label": "Close",   "fn": function () {  this.close();  } } 
                    ] ) ;
    };
    //-------------------------------------------------------------------
    function editRow( ) {
       ...
    };
    //-------------------------------------------------------------------
    function copyRow( ) {
          ...
    };
    //-------------------------------------------------------------------
    function deleteRow( ) {
          ...
    };
    //-------------------------------------------------------------------       
    // Formatting Functions
    //-------------------------------------------------------------------       
    function setRowContext() {
           ...
    };
    //-------------------------------------------------------------------
    function formatDetails( data ) { 
           ...
    };
    //-------------------------------------------------------------------
    // Support Functions
    //-------------------------------------------------------------------
    function SelectRow( ) {
           ...
    };
    //-------------------------------------------------------------------
    function DeSelectRow( ) {
           ...
    };
    //-------------------------------------------------------------------
    function ClosePreviousRow(   ) {
           ...
    };
    //-------------------------------------------------------------------
    function OpenCloseRow( cellClassName ) {
           ...
    };
    //-------------------------------------------------------------------
    // Start of Member Click Event
    //-------------------------------------------------------------------
    $('#member').on( 'click', 'tbody td', function (e) {
        ...
    } ); //end of Member Click Event

    //  any return logic goes here
    return {
        getFilter: function() {
                return nFilter;
            },      
        setFilter: function( nValue ) {
                nFilter = nValue ;
                return nFilter;             
            }           
    };   
 })(jQuery, document, window);
//------------------------------------------------
var memberObject = new member(); 

allan

There is certainly no harm in using them. It can often be up to the coding style preferences of the individual programmer though. Personally I use them a fair amount.

Allan

sameeralikhan

I think - this is one of the best way to keep your code clean. In this way all your table related code is separate from other javascript of your application. It is easy to maintain as well.