Introduction To Object-Oriented JavaScript Example

IntroductionToObject-OrientedJavaScriptExample.js

(function ($) {
    var APP = function () {
        this.permanentId = $('.permanentId');
        this.table = $('table');
        this.lockButton = $('.btn-lock');
    };

    APP.prototype.start = function () {
        var self = this;
        this.permanentId.on("click", function () {
            window.prompt("Copy to clipboard: Ctrl+C, Enter", $(this).attr("data-permanentId"));
        });

        this.lockButton.on("click", function () {
            $(this).data('id');
            $(this).data('enable');
            self.toggleEnable();
        });

        this.table.tablesorter({
            theme: "bootstrap",
            widthFixed: true,
            headers: { 5: { sorter: false, filter: false }, 7: { sorter: false, filter: false } },
            headerTemplate: '{content} {icon}',
            widgets: ["uitheme", "filter", "zebra"],
            widgetOptions: {
                zebra: ["even", "odd"],
                filter_reset: ".reset"
            }
        })
        .tablesorterPager({
            container: $(".ts-pager"),
            cssGoto: ".pagenum",
            removeRows: false,
            output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
        });
    }

    APP.prototype.toggleEnable = function () {
        alert('ok');
    }

    $(document).ready(function () {
        $.tablesorter.themes.bootstrap = {
            // these classes are added to the table. To see other table classes available,
            // look here: http://getbootstrap.com/css/#tables
            table: 'table table-bordered table-striped',
            caption: 'caption',
            // header class names
            header: 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
            sortNone: '',
            sortAsc: '',
            sortDesc: '',
            active: '', // applied when column is sorted
            hover: '', // custom css required - a defined bootstrap style may not override other classes
            // icon class names
            icons: '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
            iconSortNone: 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
            iconSortAsc: 'icon-chevron-up glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
            iconSortDesc: 'icon-chevron-down glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
            filterRow: '', // filter row class
            footerRow: '',
            footerCells: '',
            even: '', // even row zebra striping
            odd: ''  // odd row zebra striping
        };
        var app = new APP();
        app.start();
    });

})(jQuery);