开发者

tablesorter (jQuery) - How to create a custom sorter for my needs here

the jQuery tablesorter plugin isn't working too well for one specific case. Basically, I just want this to sort between the text "None" and 'ANYTHING ELSE' ... but I can't figure out how to do it (or even where to begin, really...).

Column #3 is filled with a lot of different possibilities, but wha开发者_C百科t I want to do is simple:

  1. When the cell contains the text, "None"
  2. When the cell contains ANYTHING ELSE AT ALL....

Thanks ahead of time.

Right now, the call looks like this:

$(document).ready( function () {
            // TableSorter
                $("#dt-results") 
                .tablesorter({
                                widgets: ['zebra'], 
                                sortList: [[0,1]],
                                headers: { 
                                    1: { 
                                        sorter:'currency' 
                                    }
                                }, 

                                textExtraction: function(node) {
                                    return $(node).text();
                                }

                })
                .tablesorterPager({container: $("#pager")})
                .tablesorterFilter({filterContainer: $("#filter-box"),
                              filterClearContainer: $("#filter-clear-button"),
                              filterCaseSensitive: false,
                              filterWaitTime: 10});
        });


look at the updated code: http://jsfiddle.net/L4PFn/9/

you can certainly make the code more cleaner. but for now the logic is.. textExtraction: function(node) gives you the html/content of the column and you need to return text which will be used in sorting.

So 1st step is how to identify that currently textextraction is at User Column. For this you can use a unique class attribute on the content of user column. in my example I have added usercol as that class

<div class="outer usercol">
  <div class="inner">
     <div style="line-height:12px; margin-bottom:10px;">Bobb Johnson<br>&nbsp;&nbsp;&nbsp;<em>STATUS</em><br>
     </div>
  </div>
</div>

and

<div class="outer usercol">None</div>

and in textExtraction add

if($(node.innerHTML).hasClass('outer') && $(node.innerHTML).hasClass('usercol') ){
}

this if statement tells us that we are at our user column

next step is to check if content of current column is 'None'. if 'None' then return 'z' or 'a', as this will ensure that 'none' will either be at top or bottom, when sorted

if($.trim($(node).text()) == 'None'){
  return 'z'; //so that none comes last
}

otherwise you can either return $(node).text(); or better is to drill down to name. you can add name in a span, give it a unique class name and then return $(node.innerHTML).find('span.unique-class-name').text()

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜