jQuery tablesort插件推荐

最新推荐文章于 2021-06-03 12:03:10 发布

weixin_30663471

最新推荐文章于 2021-06-03 12:03:10 发布

阅读量89

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/cart55free99/p/3546101.html

版权

搜索结果的第一条网址(似乎是Official Site)似乎有问题（也可能是我弄错了总之chrome中有个叉叉）

所以还是用这个吧http://mottie.github.io/tablesorter/docs/

主需要通过选择器指定好是哪个table table要有thead 然后调用方法就能运行

不过这里有个更妙的就在刚才的页面底部有很多forks

比如这个http://mottie.github.io/tablesorter/docs/example-widget-bootstrap-theme.html

加上了bootstrap的主题(用上了bootstrap样式啦) 还增加了过滤条件翻页什么的很不错哟！

这些forks很多都是只有demo但是没有下载的在抠HTML的时候要注意

在一个demo中对于table里面的html 都是经过js插件处理后的html 不能直接拿来用可以先disable js的状态下再查看html

废话不多说直接上

HTML

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="propath" value="${pageContext.request.contextPath}" />

<!-- 项目根路径 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="${propath}/css/bootstrap.min.css" rel="stylesheet">
<link
    href="http://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css"
    rel="stylesheet">
<link href="${propath}/css/index2/doc.css" rel="stylesheet">
<link href="${propath}/css/index2/myBasic.css" rel="stylesheet">
<link href="${propath}/css/affix/affix.css" rel="stylesheet">
<link href="${propath}/css/datePicker/bootstrap-datetimepicker.min.css"
    rel="stylesheet">
<link href="${propath}/css/tablesort/tablesort.css" rel="stylesheet">

<!-- script -->
<!-- script -->
<!-- script -->
<!-- script -->
<!-- script -->
<!-- script -->
<!-- script -->
<!-- script -->
<!-- script -->
<!-- script -->
<script src="${propath}/js/jquery-1.9.0.min.js" charset="utf-8"></script>
<script
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"
    type="text/javascript"></script>

<script src="${propath}/js/bootstrap.min.js" charset="utf-8"></script>
<script src="${propath}/js/datePicker/bootstrap-datetimepicker.min.js"
    charset="utf-8"></script>
<script src="${propath}/js/tablesorter/tablesorter.js" charset="utf-8"></script>
<script src="${propath}/js/tablesorter/jquery.tablesorter.widgets.js"
    charset="utf-8"></script>
<script src="${propath}/js/tablesorter/jquery.tablesorter.pager.js"
    charset="utf-8"></script>

<script src="forTableSorter.js" charset="utf-8">
</script>
</head>

<body data-spy="scroll" data-target=".bs-docs-sidebar" style="">
    <div class="demo1">
        <table id="myTable" class="tablesorter">
            <thead>
                <tr>
                    <th>Account #</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Age</th>
                    <th>Total</th>
                    <th>Discount</th>
                    <th>Difference</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>A42b</td>
                    <td>Peter</td>
                    <td>Parker</td>
                    <td>28</td>
                    <td>$9.99</td>
                    <td>20.9%</td>
                    <td>+12.1</td>
                    <td>Jul 6, 2006 8:14 AM</td>
                </tr>
                <tr>
                    <td>A255</td>
                    <td>John</td>
                    <td>Hood</td>
                    <td>33</td>
                    <td>$19.99</td>
                    <td>25%</td>
                    <td>+12</td>
                    <td>Dec 10, 2002 5:14 AM</td>
                </tr>
                <tr>
                    <td>A33</td>
                    <td>Clark</td>
                    <td>Kent</td>
                    <td>18</td>
                    <td>$15.89</td>
                    <td>44%</td>
                    <td>-26</td>
                    <td>Jan 12, 2003 11:14 AM</td>
                </tr>
                <tr>
                    <td>A1</td>
                    <td>Bruce</td>
                    <td>Almighty</td>
                    <td>45</td>
                    <td>$153.19</td>
                    <td>44.7%</td>
                    <td>+77</td>
                    <td>Jan 18, 2001 9:12 AM</td>
                </tr>
                <tr>
                    <td>A102</td>
                    <td>Bruce</td>
                    <td>Evans</td>
                    <td>22</td>
                    <td>$13.19</td>
                    <td>11%</td>
                    <td>-100.9</td>
                    <td>Jan 18, 2007 9:12 AM</td>
                </tr>
                <tr>
                    <td>A42a</td>
                    <td>Bruce</td>
                    <td>Evans</td>
                    <td>22</td>
                    <td>$13.19</td>
                    <td>11%</td>
                    <td>0</td>
                    <td>Jan 18, 2007 9:12 AM</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--
        DDDDDDDDDDDDDDDDDDD
        DDDDDDDDDDDDDDDDDDDDD
        DDDDDDDDDDDDDDDDDDDDDD
        DDDDDDDDDDDDDDDDDSDDDDDD
        DDDDDD         DDDDDDDDDD
        DDDDDD          DDDDDDDDDD
        DDDDDD           DDDDDDDDDD
        DDDDDD           DDDDDDDDDD                             
        DDDDDD           DDDDDDDDDD
        DDDDDD           DDDDDDDDD
        DDDDDD          DDDDDDDDDD
        DDDDDD         DDDDDDDDDD                               
        DDDDDDDDDDDDDDDDDDDDDDDD
        DDDDDDDDDDDDDDDDDDDDDDD
        DDDDDDDDDDDDDDDDDDDDDD
        DDDDDDDDDDDDDDDDDDDD

     -->
    <div class="bootstrap_buttons">
        Reset filter : <button data-filter="" data-column="0" class="reset btn btn-primary" type="button"><i class="icon-white icon-refresh glyphicon glyphicon-refresh"></i> Reset filters</button>
    </div>
    <table class="tablesorter" id="myTable2">
        <thead>
            <tr>
                <th>Name</th>
                <th>Major</th>
                <th class="filter-select filter-exact"
                    data-placeholder="Pick a gender">Sex</th>
                <th>English</th>
                <th>Japanese</th>
                <th>Calculus</th>
                <th>Geometry</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Major</th>
                <th>Sex</th>
                <th>English</th>
                <th>Japanese</th>
                <th>Calculus</th>
                <th>Geometry</th>
            </tr>
            <tr>
                <th colspan="7" class="ts-pager form-horizontal">
                    <button type="button" class="btn first">
                        <i class="icon-step-backward glyphicon glyphicon-step-backward"></i>
                    </button>
                    <button type="button" class="btn prev">
                        <i class="icon-arrow-left glyphicon glyphicon-backward"></i>
                    </button> <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
                    <button type="button" class="btn next">
                        <i class="icon-arrow-right glyphicon glyphicon-forward"></i>
                    </button>
                    <button type="button" class="btn last">
                        <i class="icon-step-forward glyphicon glyphicon-step-forward"></i>
                    </button> <select class="pagesize input-mini" title="Select page size">
                        <option selected="selected" value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                </select> <select class="pagenum input-mini" title="Select page number"></select>
                </th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Student01</td>
                <td>Languages</td>
                <td>male</td>
                <td>80</td>
                <td>70</td>
                <td>75</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Student02</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>90</td>
                <td>88</td>
                <td>100</td>
                <td>90</td>
            </tr>
            <tr>
                <td>Student03</td>
                <td>Languages</td>
                <td>female</td>
                <td>85</td>
                <td>95</td>
                <td>80</td>
                <td>85</td>
            </tr>
            <tr>
                <td>Student04</td>
                <td>Languages</td>
                <td>male</td>
                <td>60</td>
                <td>55</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Student05</td>
                <td>Languages</td>
                <td>female</td>
                <td>68</td>
                <td>80</td>
                <td>95</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Student06</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>100</td>
                <td>99</td>
                <td>100</td>
                <td>90</td>
            </tr>
            <tr>
                <td>Student07</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>85</td>
                <td>68</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>Student08</td>
                <td>Languages</td>
                <td>male</td>
                <td>100</td>
                <td>90</td>
                <td>90</td>
                <td>85</td>
            </tr>
            <tr>
                <td>Student09</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>80</td>
                <td>50</td>
                <td>65</td>
                <td>75</td>
            </tr>
            <tr>
                <td>Student10</td>
                <td>Languages</td>
                <td>male</td>
                <td>85</td>
                <td>100</td>
                <td>100</td>
                <td>90</td>
            </tr>
            <tr>
                <td>Student11</td>
                <td>Languages</td>
                <td>male</td>
                <td>86</td>
                <td>85</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Student12</td>
                <td>Mathematics</td>
                <td>female</td>
                <td>100</td>
                <td>75</td>
                <td>70</td>
                <td>85</td>
            </tr>
            <tr>
                <td>Student13</td>
                <td>Languages</td>
                <td>female</td>
                <td>100</td>
                <td>80</td>
                <td>100</td>
                <td>90</td>
            </tr>
            <tr>
                <td>Student14</td>
                <td>Languages</td>
                <td>female</td>
                <td>50</td>
                <td>45</td>
                <td>55</td>
                <td>90</td>
            </tr>
            <tr>
                <td>Student15</td>
                <td>Languages</td>
                <td>male</td>
                <td>95</td>
                <td>35</td>
                <td>100</td>
                <td>90</td>
            </tr>
            <tr>
                <td>Student16</td>
                <td>Languages</td>
                <td>female</td>
                <td>100</td>
                <td>50</td>
                <td>30</td>
                <td>70</td>
            </tr>
            <tr>
                <td>Student17</td>
                <td>Languages</td>
                <td>female</td>
                <td>80</td>
                <td>100</td>
                <td>55</td>
                <td>65</td>
            </tr>
            <tr>
                <td>Student18</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>30</td>
                <td>49</td>
                <td>55</td>
                <td>75</td>
            </tr>
            <tr>
                <td>Student19</td>
                <td>Languages</td>
                <td>male</td>
                <td>68</td>
                <td>90</td>
                <td>88</td>
                <td>70</td>
            </tr>
            <tr>
                <td>Student20</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>40</td>
                <td>45</td>
                <td>40</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Student21</td>
                <td>Languages</td>
                <td>male</td>
                <td>50</td>
                <td>45</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Student22</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>100</td>
                <td>99</td>
                <td>100</td>
                <td>90</td>
            </tr>
            <tr>
                <td>Student23</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>82</td>
                <td>77</td>
                <td>0</td>
                <td>79</td>
            </tr>
            <tr>
                <td>Student24</td>
                <td>Languages</td>
                <td>female</td>
                <td>100</td>
                <td>91</td>
                <td>13</td>
                <td>82</td>
            </tr>
            <tr>
                <td>Student25</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>22</td>
                <td>96</td>
                <td>82</td>
                <td>53</td>
            </tr>
            <tr>
                <td>Student26</td>
                <td>Languages</td>
                <td>female</td>
                <td>37</td>
                <td>29</td>
                <td>56</td>
                <td>59</td>
            </tr>
            <tr>
                <td>Student27</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>86</td>
                <td>82</td>
                <td>69</td>
                <td>23</td>
            </tr>
            <tr>
                <td>Student28</td>
                <td>Languages</td>
                <td>female</td>
                <td>44</td>
                <td>25</td>
                <td>43</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Student29</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>77</td>
                <td>47</td>
                <td>22</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Student30</td>
                <td>Languages</td>
                <td>female</td>
                <td>19</td>
                <td>35</td>
                <td>23</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Student31</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>90</td>
                <td>27</td>
                <td>17</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Student32</td>
                <td>Languages</td>
                <td>female</td>
                <td>60</td>
                <td>75</td>
                <td>33</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Student33</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>4</td>
                <td>31</td>
                <td>37</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Student34</td>
                <td>Languages</td>
                <td>female</td>
                <td>77</td>
                <td>97</td>
                <td>81</td>
                <td>44</td>
            </tr>
            <tr>
                <td>Student35</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>5</td>
                <td>81</td>
                <td>51</td>
                <td>95</td>
            </tr>
            <tr>
                <td>Student36</td>
                <td>Languages</td>
                <td>female</td>
                <td>70</td>
                <td>61</td>
                <td>70</td>
                <td>94</td>
            </tr>
            <tr>
                <td>Student37</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>60</td>
                <td>3</td>
                <td>61</td>
                <td>84</td>
            </tr>
            <tr>
                <td>Student38</td>
                <td>Languages</td>
                <td>female</td>
                <td>63</td>
                <td>39</td>
                <td>0</td>
                <td>11</td>
            </tr>
            <tr>
                <td>Student39</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>50</td>
                <td>46</td>
                <td>32</td>
                <td>38</td>
            </tr>
            <tr>
                <td>Student40</td>
                <td>Languages</td>
                <td>female</td>
                <td>51</td>
                <td>75</td>
                <td>25</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Student41</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>43</td>
                <td>34</td>
                <td>28</td>
                <td>78</td>
            </tr>
            <tr>
                <td>Student42</td>
                <td>Languages</td>
                <td>female</td>
                <td>11</td>
                <td>89</td>
                <td>60</td>
                <td>95</td>
            </tr>
            <tr>
                <td>Student43</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>48</td>
                <td>92</td>
                <td>18</td>
                <td>88</td>
            </tr>
            <tr>
                <td>Student44</td>
                <td>Languages</td>
                <td>female</td>
                <td>82</td>
                <td>2</td>
                <td>59</td>
                <td>73</td>
            </tr>
            <tr>
                <td>Student45</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>91</td>
                <td>73</td>
                <td>37</td>
                <td>39</td>
            </tr>
            <tr>
                <td>Student46</td>
                <td>Languages</td>
                <td>female</td>
                <td>4</td>
                <td>8</td>
                <td>12</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Student47</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>89</td>
                <td>10</td>
                <td>6</td>
                <td>11</td>
            </tr>
            <tr>
                <td>Student48</td>
                <td>Languages</td>
                <td>female</td>
                <td>90</td>
                <td>32</td>
                <td>21</td>
                <td>18</td>
            </tr>
            <tr>
                <td>Student49</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>42</td>
                <td>49</td>
                <td>49</td>
                <td>72</td>
            </tr>
            <tr>
                <td>Student50</td>
                <td>Languages</td>
                <td>female</td>
                <td>56</td>
                <td>37</td>
                <td>67</td>
                <td>54</td>
            </tr>
        </tbody>
    </table>

</body>
</html>
</html>

$(document).ready(function() {
    $("#myTable").tablesorter();
});


$(function() {

    $.extend($.tablesorter.themes.bootstrap, {
        // these classes are added to the table. To see other table classes
        // available,
        // look here: http://twitter.github.com/bootstrap/base-css.html#tables
        table : 'table table-bordered',
        caption : 'caption',
        header : 'bootstrap-header', // give the header a gradient background
        footerRow : '',
        footerCells : '',
        icons : '', // add "icon-white" to make them white; this icon class is
                    // added to the <i>in the header
        sortNone : 'bootstrap-icon-unsorted',
        sortAsc : 'icon-chevron-up glyphicon glyphicon-chevron-up', // includes
                                                                    // classes
                                                                    // for
                                                                    // Bootstrap
                                                                    // v2 & v3
        sortDesc : 'icon-chevron-down glyphicon glyphicon-chevron-down', // includes
                                                                            // classes
                                                                            // for
                                                                            // Bootstrap
                                                                            // v2 &
                                                                            // v3
        active : '', // applied when column is sorted
        hover : '', // use custom css here - bootstrap class may not override it
        filterRow : '', // filter row class
        even : '', // odd row zebra striping
        odd : '' // even row zebra striping
    });

    // call the tablesorter plugin and apply the uitheme widget
    $("#myTable2").tablesorter({
        // this will apply the bootstrap theme if "uitheme" widget is included
        // the widgetOptions.uitheme is no longer required to be set
        theme : "bootstrap",

        widthFixed : true,

        headerTemplate : '{content} {icon}', // new in v2.7. Needed to add
                                                // the bootstrap icon!

        // widget code contained in the jquery.tablesorter.widgets.js file
        // use the zebra stripe widget if you plan on hiding any rows (filter
        // widget)
        widgets : [ "uitheme", "filter", "zebra" ],

        widgetOptions : {
            // using the default zebra striping class name, so it actually isn't
            // included in the theme variable above
            // this is ONLY needed for bootstrap theming if you are using the
            // filter widget, because rows are hidden
            zebra : [ "even", "odd" ],

            // reset filters button
            filter_reset : ".reset"

        // set the uitheme widget to use the bootstrap theme class names
        // this is no longer required, if theme is set
        // ,uitheme : "bootstrap"

        }
    }).tablesorterPager({

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

        // target the pager page select dropdown - choose a page
        cssGoto : ".pagenum",

        // 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,

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

    });

});

CSS

@CHARSET "UTF-8";
/* 针对第一个表格的 */
div.demo1 table.tablesorter {
    background-color: #CDCDCD;
    font-family: arial;
    font-size: 8pt;
    margin: 10px 0 15px;
    text-align: left;
    width: 100%;
}

div.demo1 table.tablesorter thead tr th,div.demo1 table.tablesorter tfoot tr th {
    background-color: #E6EEEE;
    border: 1px solid #FFFFFF;
    font-size: 8pt;
    padding: 4px;
}

div.demo1 table.tablesorter thead tr .header {
    background-image: url("bg.gif");
    background-position: right center;
    background-repeat: no-repeat;
    cursor: pointer;
}

div.demo1 table.tablesorter tbody td {
    background-color: #FFFFFF;
    color: #3D3D3D;
    padding: 4px;
    vertical-align: top;
}

div.demo1 table.tablesorter tbody tr.odd td {
    background-color: #F0F0F6;
}

div.demo1 table.tablesorter thead tr .headerSortUp {
    background-image: url("asc.gif");
}

div.demo1 table.tablesorter thead tr .headerSortDown {
    background-image: url("desc.gif");
}

div.demo1 table.tablesorter thead tr .headerSortDown,div.demo1 table.tablesorter thead tr .headerSortUp
    {
    background-color: #8DBDD8;
} 



/*************
  Bootstrap theme
 *************/
/* jQuery Bootstrap Theme */
.tablesorter-bootstrap {
    width: 100%;
}
.tablesorter-bootstrap .tablesorter-header,
.tablesorter-bootstrap tfoot th,
.tablesorter-bootstrap tfoot td {
    font: bold 14px/20px Arial, Sans-serif;
    padding: 4px;
    margin: 0 0 18px;
    background-color: #eee;
}

.tablesorter-bootstrap .tablesorter-header {
    cursor: pointer;
}

.tablesorter-bootstrap .tablesorter-header-inner {
    position: relative;
    padding: 4px 18px 4px 4px;
}

/* bootstrap uses <i> for icons */
.tablesorter-bootstrap .tablesorter-header i {
    font-size: 11px;
    position: absolute;
    right: 2px;
    top: 50%;
    margin-top: -7px; /* half the icon height; older IE doesn't like this */
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    line-height: 14px;
    display: inline-block;
}
.tablesorter-bootstrap .bootstrap-icon-unsorted {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWVJREFUeNqUUL9Lw2AUTGP8mqGlpBQkNeCSRcckEBcHq1jImMElToKuDvpHFMGhU0BQcHBwLji6CE1B4uB/INQsDi4d2jQ/fPeZxo764OV6915f7lLJ81xot9tCURXqdVEUr7IsO6ffH9Q5BlEUCaLwWxWqTcbYnaIoh0Dw4gAvcWlxq1qt9hqNxg6hUGAP+uIPUrGs0qXLer2+v/pTX6QpxLtkc2U2m53ACb8sSdIDXerSEms2m6+DweAICA4d89KGbduf9MpEVdXQ9/2LVqv1CASHjjn3iq/x1xKFfxQPqGnada1W86bT6SiO42OS3qk3KPStLMvbk8nkfjwen/LLuq6blFymMB0KdUPSGhAcOualjX6/f0bCiC7NaWGPQr0BwaFjzn0gYJqmLAiCA8/zni3LmhuGkQPBoWPOPwQeaPIqD4fDruu6L6Zp5kBw6IudchmdJAkLw3DXcZwnIPjy/FuAAQCiqqWWCAFKcwAAAABJRU5ErkJggg==);
}

/* since bootstrap (table-striped) uses nth-child(), we just use this to add a zebra stripe color */
.tablesorter-bootstrap tr.odd td {
    background-color: #f9f9f9;
}
.tablesorter-bootstrap tbody > .odd:hover > td,
.tablesorter-bootstrap tbody > .even:hover > td {
    background-color: #f5f5f5;
}
.tablesorter-bootstrap tr.even td {
    background-color: #fff;
}

/* processing icon */
.tablesorter-bootstrap .tablesorter-processing {
    background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: absolute;
    z-index: 1000;
}

/* caption */
.caption {
    background: #fff;
}

/* filter widget */
.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter {
    width: 98%;
    height: auto;
    margin: 0 auto;
    padding: 4px 6px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: height 0.1s ease;
    -moz-transition: height 0.1s ease;
    -o-transition: height 0.1s ease;
    transition: height 0.1s ease;
}
.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled {
    background: #eee;
    cursor: not-allowed;
}
.tablesorter-bootstrap .tablesorter-filter-row td {
    background: #efefef;
    line-height: normal;
    text-align: center;
    padding: 4px 6px;
    vertical-align: middle;
    -webkit-transition: line-height 0.1s ease;
    -moz-transition: line-height 0.1s ease;
    -o-transition: line-height 0.1s ease;
    transition: line-height 0.1s ease;
}
/* hidden filter row */
.tablesorter-bootstrap .tablesorter-filter-row.hideme td {
    padding: 2px; /* change this to modify the thickness of the closed border row */
    margin: 0;
    line-height: 0;
}
.tablesorter-bootstrap .tablesorter-filter-row.hideme .tablesorter-filter {
    height: 1px;
    min-height: 0;
    border: 0;
    padding: 0;
    margin: 0;
    /* don't use visibility: hidden because it disables tabbing */
    opacity: 0;
    filter: alpha(opacity=0);
}

/* pager plugin */
.tablesorter-bootstrap .tablesorter-pager select {
  padding: 4px 6px;
}
.tablesorter-bootstrap .tablesorter-pager .pagedisplay {
    border: 0;
}
/* tfoot i for pager controls */
.tablesorter-bootstrap tfoot i {
    font-size: 11px;
}

/* ajax error row */
.tablesorter .tablesorter-errorRow td {
    cursor: pointer;
    background-color: #e6bf99;
}

转载于:https://www.cnblogs.com/cart55free99/p/3546101.html

weixin_30663471

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery tablesort插件推荐

搜索结果的第一条网址(似乎是Official Site)似乎有问题（也可能是我弄错了总之chrome中有个叉叉）所以还是用这个吧http://mottie.github.io/tablesorter/docs/主需要通过选择器指定好是哪个table table要有thead 然后调用方法就能运行不过这里有个更妙的就在刚才的页面底部有很多forks比如这个http://...
复制链接

扫一扫