当前位置: 首页 > 工具软件 > TableSort > 使用案例 >

jQuery tablesort插件推荐

单勇
2023-12-01

搜索结果的第一条网址(似乎是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>

JS

$(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

 类似资料: