tablesorter.js

var apiUrl = ajaxurl + '?action=TsAnalyticsAdmin&page={page+1}&size={size}&{sortList:sort}&{filterList:filter}';

jQuery(function ($) {
    var UserTracking = {
        date: {
            today:                    moment(),
            yesterday:                moment().subtract(1, 'days'),
            weekAgo:                  moment().subtract(6, 'days'),
            monthAgo:                 moment().subtract(1, 'month'),
            yearAgo:                  moment().subtract(1, 'year'),
            beginningOfMonth:         moment().startOf('month'),
            beginningOfPreviousMonth: moment().subtract(1, 'month').startOf('month'),
            endOfPreviousMonth:       moment().subtract(1, 'month').endOf('month')
        },


        commonSetup: function () {
/*            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                $('.tab-pane.active').find('table').trigger('applyWidgets');
                $(window).resize();
            });*/

            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                if(e.target.hash == '#downloads') {
                    UserTracking.initDownloads();
                } else {
                    UserTracking.initVisits();
                }
            });

            $('.toggle-groups').click(function (e) {
                $('.user-tracking-table').find('.group-header').trigger('toggleGroup');
                return false;
            });


            $('.datepicker').daterangepicker({
                "opens":     "left",
                "ranges":    {
                    'Today':          [this.date.today, this.date.today],
                    'Yesterday':      [this.date.yesterday, this.date.yesterday],
                    'Last 7 Days':    [this.date.weekAgo, this.date.today],
                    'This Month':     [this.date.beginningOfMonth, this.date.today],
                    'Last Month':     [this.date.beginningOfPreviousMonth, this.date.endOfPreviousMonth],
                    'Since year ago': [this.date.yearAgo, this.date.today]
                },
                "locale":    {
                    "format":    "YYYY-MM-DD",
                    "separator": " to "
                },
                "startDate": this.date.monthAgo,
                "maxDate":   this.date.today
            });

            $.tablesorter.columnSelector.attachTo($('.bootstrap-popup'), '#popover-target');
            $('#popover').popover({
                placement: 'right',
                html:      true,
                content:   $('#popover-target')
            });
        },

        initVisits: function () {
            var tab         = $('#visits');
            var table       = tab.find('.user-tracking-table');
            var excelButton = tab.find('.download-excel');
            var csvButton   = tab.find('.download-csv');

            table.tablesorter({
                //debug:             true,
                theme:             'blue',
                dateFormat:        "yyyy-mm-dd",
                initialized:       function () {
                    // don't remove busy icon on sortEnd
                    table.off('sortEnd' + table[0].config.namespace);
                    setTimeout(function () {
                        $(window).resize();
                    }, 500);
                },
                showProcessing:    true,
                widthFixed:        true,
                sortLocaleCompare: true,
                widgets:           ["columnSelector", "group", "filter", "zebra", "pager"],
                widgetOptions:     {
                    group_count:                ' ({num})',
                    group_enforceSort:          true,
                    group_collapsed:            true,
                    group_saveGroups:           false,
                    group_time24Hour:           true,
                    group_callback:             function ($cell, $rows, column, table) {
                        var totalTime = moment.duration(0);
                        $rows.each(function () {
                            var timeOnPage = $(this).find("td.time-on-page").text();
                            totalTime.add(moment.duration(timeOnPage));
                        });
                        $cell.find(".group-count").append("; In total spent " + totalTime.humanize());
                    },
                    resizable_throttle:         true,
                    columnSelector_saveColumns: true,
                    columnSelector_columns:     {
                        5:  false,
                        8:  false,
                        9:  false,
                        10: false,
                        11: false,
                        12: false
                    },
                    columnSelector_mediaquery:  false,
                    pager_container:            tab.find('.pager'),
                    pager_ajaxUrl:              apiUrl,
                    pager_customAjaxUrl:        function (table, url) {
                        var c = table.config;
                        c.$tbodies.eq(0).empty();
                        $.tablesorter.isProcessing(c.table, true);
                        //url can also be found here: config.pager.ajaxObject.url
                        excelButton.attr('href', url + '&excelDownload');
                        csvButton.attr('href', url + '&csvDownload');
                        return url;
                    },
                    pager_ajaxProcessing:       function (result, table, xhr) {
                        if (result) {
                            result.rows = $(result.rows);
                            if (result.filteredRows > 10000) {
                                excelButton.addClass('disabled');
                            } else {
                                excelButton.removeClass('disabled');
                            }
                            return result;
                        }
                    },
                    pager_processAjaxOnInit:    true,
                    pager_output:               'Displaying page {page} (row {startRow} to {endRow}) from {filteredRows} filtered (total' +
                                                ' {totalRows}) rows.',
                    pager_updateArrows:         true,
                    pager_page:                 0,
                    pager_size:                 25,
                    pager_savePages:            false,
                    pager_storageKey:           'tablesorter-pager',
                    pager_pageReset:            0,
                    pager_fixedHeight:          false,
                    pager_removeRows:           true,
                    pager_countChildRows:       false,
                    filter_cssFilter:           ['', '', '', '', '', '', 'datepicker'],
                    filter_serversideFiltering: false,
                    filter_reset:               'button.reset',
                    output_delivery:            'd',
                    output_saveFileName:        'TsAnalytics.csv',
                    output_saveRows:            function (index, element) {
                        return !$(this).hasClass('group-header');
                    }
                }
            }).on('apply.daterangepicker', function () {
                table.trigger('search');
            }).on('groupingComplete', function () {
                $('button.toggle-groups').fadeIn();
            }).on('filterStart', function () {
                $('button.reset').fadeIn();
            }).on('click', 'td.truncate', function () {
                $(this).toggleClass('show');
            });

        },

        initDownloads: function () {
            var tab         = $('#downloads');
            var table       = tab.find('table');
            var excelButton = tab.find('.download-excel');
            var csvButton   = tab.find('.download-csv');

            table.tablesorter({
                //debug:             true,
                theme:             'blue',
                dateFormat:        "yyyy-mm-dd",
                initialized:       function () {
                    // don't remove busy icon on sortEnd
                    table.off('sortEnd' + table[0].config.namespace);
                    setTimeout(function () {
                        $(window).resize();
                    }, 500);
                },
                showProcessing:    true,
                widthFixed:        true,
                sortLocaleCompare: true,
                widgets:           ["columnSelector", "group", "filter", "zebra", "pager"],
                widgetOptions:     {
                    group_count:                ' ({num})',
                    group_enforceSort:          true,
                    group_collapsed:            true,
                    group_saveGroups:           false,
                    group_time24Hour:           true,
                    group_callback:             function ($cell, $rows, column, table) {
                        var totalTime = moment.duration(0);
                        $rows.each(function () {
                            var timeOnPage = $(this).find("td.time-on-page").text();
                            totalTime.add(moment.duration(timeOnPage));
                        });
                        $cell.find(".group-count").append("; In total spent " + totalTime.humanize());
                    },
                    resizable_throttle:         true,
                    columnSelector_saveColumns: true,
                    columnSelector_columns:     {
                        5:  false,
                        8:  false,
                        9:  false,
                        10: false,
                        11: false,
                        12: false
                    },
                    columnSelector_mediaquery:  false,
                    pager_container:            tab.find('.pager'),
                    pager_ajaxUrl:              apiUrl + '&downloadKeyTable',
                    pager_customAjaxUrl:        function (table, url) {
                        var c = table.config;
                        c.$tbodies.eq(0).empty();
                        $.tablesorter.isProcessing(c.table, true);
                        //url can also be found here: config.pager.ajaxObject.url
                        excelButton.attr('href', url + '&excelDownload');
                        csvButton.attr('href', url + '&csvDownload');
                        return url;
                    },
                    pager_ajaxProcessing:       function (result, table, xhr) {
                        if (result) {
                            result.rows = $(result.rows);
                            if (result.filteredRows > 10000) {
                                excelButton.addClass('disabled');
                            } else {
                                excelButton.removeClass('disabled');
                            }
                            return result;
                        }
                    },
                    pager_processAjaxOnInit:    true,
                    pager_output:               'Displaying page {page} (row {startRow} to {endRow}) from {filteredRows} filtered (total' +
                                                ' {totalRows}) rows.',
                    pager_updateArrows:         true,
                    pager_page:                 0,
                    pager_size:                 25,
                    pager_savePages:            false,
                    pager_storageKey:           'tablesorter-pager',
                    pager_pageReset:            0,
                    pager_fixedHeight:          false,
                    pager_removeRows:           true,
                    pager_countChildRows:       false,
                    filter_cssFilter:           ['', '', '', '', '', '', 'datepicker'],
                    filter_serversideFiltering: false,
                    filter_reset:               'button.reset',
                    output_delivery:            'd',
                    output_saveFileName:        'TsAnalytics.csv',
                    output_saveRows:            function (index, element) {
                        return !$(this).hasClass('group-header');
                    }
                }
            }).on('apply.daterangepicker', function () {
                table.trigger('search');
            }).on('groupingComplete', function () {
                $('button.toggle-groups').fadeIn();
            }).on('filterStart', function () {
                $('button.reset').fadeIn();
            }).on('click', 'td.truncate', function () {
                $(this).toggleClass('show');
            });

        }

    };

    UserTracking.initVisits();
    UserTracking.commonSetup();
});