сортировка столбца в javascript с повторяющимися столбцами

Question

Мне нужен сортировщик таблицы javascript, который может обрабатывать повторяющиеся столбцы. таблица выложена в несколько столбцов, потому что она настолько узкая. например:

<table> 
<thead> 
    <tr> <th>name</th> <th>score</th> <th>name</th> <th>score</th> </tr> 
</thead> 
<tbody> 
<tr> <td> n1 </td> <td> 4 </td> <td> n3 </td> <td> 2 </td> </tr> 
<tr> <td> n2 </td> <td> 3 </td> <td> n4 </td> <td> 1 </td> </tr> 
</tbody> 
</table> 

Я хотел бы таблицу сортировать по оценкам через оба забьют столбцы, когда один из заголовков бигованных щелкают. то же самое для имен, конечно. в моих реальных приложениях у меня может быть 100 строк, каждый из которых содержит всего несколько символов (2 столбца), а реорганизованная таблица может быть всего лишь 20 строк (=> 10 столбцов) и, следовательно, более удобна для просмотра.

(на самом деле я бы хотел, чтобы html-таблица могла автоматически расширяться, разбивая длинные и узкие таблицы на широкие и короткие таблицы, но этого слишком много, чтобы просить. Я не верю, что это существует.)

делает js (еще лучше, jquery) tablesorter с такими способностями существует?

/IAW

Answer 1

Эй, я считаю, что вы ищете TableSorter плагин для сортировки столбца и рассматривают работу демо здесь:http://jsfiddle.net/f9VvL/

В данном примере вы можете нажать на баллы и вы может видеть сортировку.

Если вы заинтересованы: http://tablesorter.com/docs/

для укладки вы можете использовать CSS awesomness, чтобы сделать это;

Надежда это helsp причиной :)

сценарий

<script type='text/javascript' src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script> 


    <script type='text/javascript' src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script> 


    <script type='text/javascript' src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script> 


    <link rel="stylesheet" type="text/css" href="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.css"> 

код

$('table').tablesorter({ 
    // *** Appearance *** 
    // fix the column widths 
    widthFixed: false, 
    // include zebra and any other widgets 
    widgets: ['zebra'], 
    // other options: "ddmmyyyy" & "yyyymmdd" 
    dateFormat: "mmddyyyy", 

    // *** Functionality *** 
    // starting sort direction "asc" or "desc" 
    sortInitialOrder: "asc", 
    // These are detected by default, 
    // but you can change or disable them 
    headers: { 
     // set "sorter : false" (no quotes) to disable the column 
     0: { sorter: "text" }, 
     1: { sorter: "digit" }, 
     2: { sorter: "text" }, 
     3: { sorter: "url" } 
    }, 
    // extract text from the table - this is how is 
    // it done by default 
    textExtraction: { 
     0: function(node) { 
      return $(node).text(); 
     }, 
     1: function(node) { 
      return $(node).text(); 
     } 
    }, 
    // forces the user to have this/these column(s) sorted first 
    sortForce: null, 
    // initial sort order of the columns 
    // [[columnIndex, sortDirection], ... ] 
    sortList: [], 
    // default sort that is added to the end of the users sort 
    // selection. 
    sortAppend: null, 
    // Use built-in javascript sort - may be faster, but does not 
    // sort alphanumerically 
    sortLocaleCompare: false, 
    // Setting this option to true will allow you to click on the 
    // table header a third time to reset the sort direction. 
    sortReset: false, 
    // Setting this option to true will start the sort with the 
    // sortInitialOrder when clicking on a previously unsorted column. 
    sortRestart: false, 
    // The key used to select more than one column for multi-column 
    // sorting. 
    sortMultiSortKey: "shiftKey", 

    // *** Customize header *** 
    onRenderHeader: function() { 
     // the span wrapper is added by default 
     $(this).find('span').addClass('roundedCorners'); 
    }, 
    // jQuery selectors used to find the header cells. 
    selectorHeaders: 'thead th', 

    // *** css classes to use *** 
    cssAsc: "headerSortUp", 
    cssChildRow: "expand-child", 
    cssDesc: "headerSortDown", 
    cssHeader: "header", 
    tableClass: 'tablesorter', 

    // *** widget css class settings *** 
    // column classes applied, and defined in the skin 
    widgetColumns: { 
     css: ["primary", "secondary", "tertiary"] 
    }, 
    // find these jQuery UI class names by hovering over the 
    // Framework icons on this page: 
    // http://jqueryui.com/themeroller/ 
    widgetUitheme: { 
     css: [ 
      "ui-icon-arrowthick-2-n-s", // Unsorted icon 
      "ui-icon-arrowthick-1-s", // Sort up (down arrow) 
      "ui-icon-arrowthick-1-n" // Sort down (up arrow) 
     ] 
    }, 
    // 
    widgetZebra: { 
     css: ["even", "odd"] 
    }, 

    // *** prevent text selection in header *** 
    cancelSelection: true, 

    // *** send messages to console *** 
    debug: false 

}).tablesorterPager({ 

    // target the pager markup - see the HTML block below 
    container: $(".pager"), 

    // use this format: "http:/mydatabase.com?page={page}&size={size}" 
    // where {page} is replaced by the page number and {size} is replaced 
    // by the number of records to show 
    ajaxUrl: null, 

    // process ajax so that the data object is returned along with 
    // the total number of rows 
    ajaxProcessing: function(ajax) { 
     if (ajax && ajax.hasOwnProperty('data')) { 
      // example ajax: 
      // { 
      // "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], 
      // "total_rows" : 100 
      // } 
      // return [ "data", "total_rows" ]; 
      return [ajax.data, ajax.total_rows]; 
     } 
    }, 

    // output string - default is '{page}/{totalPages}'; 
    // possible variables: 
    // {page}, {totalPages}, {startRow}, {endRow} and {totalRows} 
    output: '{startRow} to {endRow} ({totalRows})', 

    // apply disabled classname to the pager arrows when the rows at 
    // either extreme is visible - default is true 
    updateArrows: true, 

    // starting page of the pager (zero based index) 
    page: 0, 

    // Number of visible rows - default is 10 
    size: 10, 

    // if true, the table will remain the same height no matter 
    // how many records are displayed. The space is made up by an empty 
    // table row set to a height to compensate; default is false 
    fixedHeight: false, 

    // remove rows from the table to speed up the sort of large tables. 
    // setting this to false, only hides the non-visible rows; needed 
    // if you plan to add/remove rows with the pager enabled. 
    removeRows: false, 

    // css class names of pager arrows 
    cssNext: '.next', 
    // next page arrow 
    cssPrev: '.prev', 
    // previous page arrow 
    cssFirst: '.first', 
    // go to first page arrow 
    cssLast: '.last', 
    // go to last page arrow 
    cssPageDisplay: '.pagedisplay', 
    // location of the "output" 
    cssPageSize: '.pagesize', 
    // dropdown that sets the "size" option 
    // class added to arrows when at the extremes 
    // (i.e. prev/first arrows are "disabled" when on the first page) 
    // Note there is no period "." in front of this class name 
    cssDisabled: 'disabled' 

});​