Cannot call method 'html' of undefined in tablesorter.pager.min.js

[richzw]

I use tablesorter + pager + ajax in my project which is based on express and jade.
however, I meet one error Cannot call method 'html' of undefined in tablesorter.pager.min.js.

and codes are same as http://mottie.github.com/tablesorter/docs/example-pager-ajax.html

Can anyone help me?

[Mottie]

Can you tell me the line number in the code? Or share a demo?

[richzw]

I got the callstack from chrome console.

Uncaught TypeError: Cannot call method 'html' of undefined jquery.tablesorter.pager.min.js:3
d.extend.tablesorterPager.z jquery.tablesorter.pager.min.js:3
d.extend.tablesorterPager.m jquery.tablesorter.pager.min.js:3
f.Callbacks.o jquery-1.7.2.min.js:2
f.Callbacks.p.fireWith jquery-1.7.2.min.js:2
w jquery-1.7.2.min.js:4
f.support.ajax.f.ajaxTransport.send.d jquery-1.7.2.min.js:4

[richzw]

here is my web page code in jade.

  1 table.search-table.table.table-striped.table-bordered.table-hover
  2     thead
  3         tr
  4             th 1
  5             th 2
  6             th 3
  7     tfoot
  8         tr
  9             td.pager(colspan="3")
 10                 button.btn.first
 11                     i.icon-step-backward
 12                 button.btn.prev
 13                     i.icon-arrow-left
 14                 span.pagedisplay
 15                 button.btn.next
 16                     i.icon-arrow-right
 17                 button.btn.last
 18                     i.icon-step-forward
 19                 select.pagesize//.pagenum.input-mini(title="Select page number")
 20                     option(value="5") 5
 21     tbody

[Mottie]

Sorry, can you change it to not use the min version of the pager.

[richzw]

Yes,

Error on jquery.tablesorter.pager.js:237

[richzw]

I debug it, and find $b is undefined

[richzw]

$(function(){
    $.extend($.tablesorter.themes.bootstrap, {
        table: 'table table-bordered',
        header: 'bootstrap-header',
        footerRow: '',
        footerCells: '',
        icons: '',
        sortNone: 'boostrap-icon-unsorted',
        sortAsc: 'icon-chevron-up',
        sortDesc: 'icon-chevron-down',
        active: '',
        hover: '',
        filterRow: '',
        even: '',
        odd: ''
    });
    $('table').tablesorter({
        theme: 'bootstrap',
        widthFixed: true,
        headerTemplate: '{content} {icon}',
        widgets: ['zebra', 'filter', 'uitheme'],// 'columns', 'uitheme'],
        sortList: [[0,0]],
        //debug: true,
        widgetOptions:{
            uitheme: 'bootstrap',
            zebra: ['even', 'odd'],
            filter_childRows: false,
            filter_columnFilters: true,
            filter_cssFilter: 'tablesorter-filter',
            filter_functions: {
                0: true 
            },
            filter_hideFilters: false,
            filter_ignoreCase: true,
            //filter_reset: '.reset',
            filter_searchDelay: 300,
            //filter_startsWith: false,
            //filter_useParseData: false
        }
    }).tablesorterPager({
        container: $('.pager'),
        ajaxUrl: '/admin/tasks/query?page={page}&size={size}&col[0]=0',
        ajaxProcessing: function(data){
            if(data && data.hasOwnProperty('rows')){
                var r, row, c, d=data.rows,
                total = data.total_rows,
                headers = data.headers,
                rows = [],
                len = d.length;

                for( r = 0; r < len; r++){
                    row = [];
                    for (c in d[r]){
                        if (typeof(c) === "string"){
                            row.push(d[r][c]);
                        }
                    }
                    rows.push(row);
                }
                return [total, rows, headers];
            }
        },
        output: '{startRow} to {endRow} ({totalRows})',//'{startRow} - {endRow} / {filteredRows} ({totalRows})',
        updateArrows: true,
        page: 0,
        fixedHeight: false,//true,
        size: 5,
        //cssGoto: '.pagenum',
        removeRows: false//this must be false
    });
});

[symbianm]

Hi, guys. I have modified line 198 in non minified pager file (tablesorter.pager.js) from

$b = c.$tbodies,

to

$b = tc.$tbodies,

and error message has disappeared.

But now sorters and filters don't work for me. When I click on some header or try to filter something it sends ajax requests to the server.

I want to sort and filter my items without ajax (as it was in previous versions) or describe how to use new functionality.
Can anyone help me?

[Mottie]

Ahhh thanks @symbianm! I did notice that recently, I actually ended up removing it but I haven't push the changes yet... I will soon, as soon as I finish working out the problems with the resize widget. What new functionality are you referring to?

[symbianm]

If you can, just update this demo page http://mottie.github.com/tablesorter/docs/example-pager-ajax.html and I will rebuild my app.
I used version 2.5.4 and when first page was loaded I was able to sort and filter visible items locally (on client-side).
But in current version it works in other way.

[symbianm]

I think I know how to solve my problem. I should sort and filter items on server side. Am I right?

[Mottie]

Yes, because setting the ajaxUrl option automatically disables the filter and sorting. But it will send the filter and sorting parameters to the server via ajax.

[richzw]

Thanks @symbianm. There is no error here after changing the code as you said.

[Mottie]

Fixed in this commit: 0232c7a