tablesorter.js

        table.tablesorter({
          //debug:             true,
          theme:             'blue',
          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,
          serverSideSorting: false,
          widgets:           ['columnSelector', 'filter', 'zebra', 'pager', 'stickyHeaders'],
          widgetOptions:     {
            resizable_throttle:         true,
            columnSelector_saveColumns: true,
            columnSelector_mediaquery:  false,
            columnSelector_container:   tab.find('.popover-target'),
            pager_ajaxUrl:              apiUrl,
            pager_ajaxObject:           {
              dataType: 'json',
              type:     'POST',
              data:     {
                nonce:   MediaAccessManager.nonce,
                process: 'loadAutoAssigner'
              }
            },
            pager_customAjaxUrl:        function (table, url) {
              var c = table.config
              c.$tbodies.eq(0).empty()
              $.tablesorter.isProcessing(c.table, true)
              return url
            },
            pager_ajaxProcessing:       function (result) {
              if (result) {
                result.rows = $(result.rows)

                return result
              }
            },
            pager_processAjaxOnInit:    true,
            filter_serversideFiltering: false,
            filter_reset:               'button.reset',
            stickyHeaders_offset:       30,
            stickyHeaders_cloneId:      ''
          }
        }).on('filterStart', function () {
          $('button.reset').fadeIn()
        }).on('click', 'td.truncate', function () {
          $(this).toggleClass('show')
        }).on('pagerComplete', function () {

            //updating media rights on clicks
            $('tbody').on('click', 'td:not(.no-select)', function () {

              var $this = $(this)
              $this.addClass('temp')
              $this.toggleClass('green')

              var row                = $this.closest('tr')
              var prefixName         = row.find('td.prefix').text()
              var selectedCells      = row.find('td.green')
              var selectedRightArray = []

              selectedCells.each(function () {
                var rightID = table.find('th').eq($(this).index()).attr('data-id')
                selectedRightArray.push(rightID)
              })

              var data = {
                name:   prefixName,
                rights: selectedRightArray
              }

              MediaAccessManagerMatrix.sendHttpRequest('save-rights', data, function (success, message) {
                if (success === true) {
                  $this.removeClass('temp')
                } else {
                  alert('Something went wrong... Error: ' + message)
                }
              })
              return false
            })

            //remove row after click on the red X
            table.find('tbody').on('click', 'tr .delete-row', function () {
              var $self   = $(this)
              var $parent = $self.parents('tr')
              var name    = $self.attr('data-prefix-name')
              var data    = {
                name: name
              }
              $parent.addClass('temp')
              MediaAccessManagerMatrix.sendHttpRequest('delete-row', data, function (success, message) {
                if (success === false) {
                  alert('Something went wrong deleting the prefix ' + name + '. Error: ' + message)
                }
                $parent.fadeOut()
              })
              return false
            })

            //Highlighting column headers of hovered cells
            $('table').delegate('td', 'mouseover mouseleave', function (e) {
              var cell   = $(this)
              var column = table.find('th,td').eq(cell.index())

              if (e.type === 'mouseover') {
                column.addClass('hover')
              } else {
                column.removeClass('hover')
              }
            })
          }
        )