0

我需要一个可以处理重复列的 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

4

1 回答 1

0

嘿,我估计您正在寻找表格排序器插件来对列进行排序并在此处查看工作演示:http: //jsfiddle.net/f9VvL/

在给定的示例中,您可以单击分数,您可以看到正在发生的排序。

如果你热衷:http ://tablesorter.com/docs/

对于样式,您可以使用 css awesomne​​ss 来做到这一点;

希望这有助于原因:)

脚本

  <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'

});​
于 2012-07-19T23:08:14.590 回答