javascript:jQuery tablesorter 2.0

https://mottie.github.io/tablesorter/docs/index.html

1.GridView

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebPaingDemo.WebForm3" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Sorting ASP.NET GridView Control using JQuery Tablesorter Plugin</title>
   <script src="script/jquery-1.9.0.js" type="text/javascript"></script>
<script src="script/jquery.tablesorter.min.js" type="text/javascript"></script>
   <style type="text/css">
th
{
cursor:pointer;
background-image: url(images/ice-unsorted.gif);
background-position: right center;
background-repeat:no-repeat;
color:Black;
font-weight:bold;
text-align:left;
}
th.headerSortUp
{
background-image: url(images/ice-asc.gif);
background-position: right center;
background-repeat:no-repeat;
}
th.headerSortDown
{
background-image: url(images/ice-desc.gif);
background-position: right center;
background-repeat:no-repeat;
}
td
{
border-bottom: solid 1px #dadada;
}
</style>
 <script type="text/javascript">
$(document).ready(function() {
$("#GridView1").tablesorter();
});
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="Horizontal" Font-Size="9pt" Font-Names="Arial"
AutoGenerateColumns="False" BorderColor="#dadada"
BorderStyle="Solid" BorderWidth="1px">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID"
ItemStyle-Width="40" />
<asp:BoundField DataField="Name" HeaderText="Name"
ItemStyle-Width="80" />
<asp:BoundField DataField="Fee" DataFormatString="{0:n0}" HeaderText="Fee"
ItemStyle-Width="60" />
<asp:BoundField DataField="Price" DataFormatString="{0:c}"
HeaderText="Price" ItemStyle-Width="60" />
<asp:BoundField DataField="Discount" DataFormatString="{0:p1}"
HeaderText="Discount" ItemStyle-Width="70" />
<asp:BoundField DataField="Difference" DataFormatString="{0:n1}"
HeaderText="Difference" ItemStyle-Width="80" />
<asp:BoundField DataField="Date" DataFormatString="{0:MMM dd, yyyy}"
HeaderText="Date" ItemStyle-Width="100" />
<asp:BoundField DataField="OnSale" HeaderText="OnSale"
ItemStyle-Width="60" />
</Columns>
</asp:GridView>
    </div>
    </form>
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
namespace WebPaingDemo
{
 
 
    /// <summary>
    ///
    /// </summary>
    public partial class WebForm3 : System.Web.UI.Page
    {
 
        /// <summary>
        ///
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                BindData();
            }
        }
        /// <summary>
        ///
        /// </summary>
        private void BindData()
        {
            int[] ids = { 12, 13, 14, 15, 16 };
            string[] names = { "Alice", "James", "Peter", "Simon", "David" };
            int[] fee = { 2299, 5123, 7564, 9595, 1600 };
            decimal[] prices = { 12.99m, 122.23m, 25.64m, 66.85m, 1.60m };
            decimal[] discounts = { 0.2m, 0.194m, 0.4564m, 0.209m, 0.310m };
            decimal[] differences = { -12m, 19.4m, -45.64m, 200.9m, 41.60m };
            string[] dates = { "04-12-2010", "07-23-2010", "07-14-2009", "12-12-2010", "11-03-2019" };
            bool[] onSale = { true, false, true, true, false };
            DataTable table = new DataTable();
            table.Columns.Add("ID", typeof(System.Int32));
            table.Columns.Add("Name", typeof(System.String));
            table.Columns.Add("Fee", typeof(System.Decimal));
            table.Columns.Add("Price", typeof(System.Decimal));
            table.Columns.Add("Discount", typeof(System.Decimal));
            table.Columns.Add("Difference", typeof(System.Int32));
            table.Columns.Add("Date", typeof(System.DateTime));
            table.Columns.Add("OnSale", typeof(System.Boolean));
            for (int i = 0; i < 5; i++)
            {
                DataRow row = table.NewRow();
                row["ID"] = ids[i];
                row["Name"] = names[i];
                row["Fee"] = fee[i];
                row["Price"] = prices[i];
                row["Discount"] = discounts[i];
                row["Difference"] = differences[i];
                row["Date"] = DateTime.Parse(dates[i]);
                row["OnSale"] = onSale[i];
                table.Rows.Add(row);
            }
            GridView1.DataSource = table;
            GridView1.DataBind();
            GridView1.UseAccessibleHeader = true;
            GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
        }
 
 
    }
}

　　2.Repeater

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebPaingDemo.WebForm4" %>
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery tablesorter 2.0 - Pager plugin</title>
 
    <!-- jQuery -->
   <script src="script/jquery-1.9.0.js" type="text/javascript"></script>
 
    <!-- Demo stuff -->
    <link rel="stylesheet" href="css/jq.css">
    <link href="css/prettify.css" rel="stylesheet">
    <script src="js/prettify.js"></script>
    <script src="js/docs.js"></script>
 
    <!-- Tablesorter: required -->
    <link rel="stylesheet" href="css/theme.blue.css">
    <script src="js/jquery.tablesorter.js"></script>
    <script src="js/jquery.tablesorter.widgets.js"></script>
 
    <!-- Tablesorter: optional -->
    <link rel="stylesheet" href="js/pager/jquery.tablesorter.pager.css">
    <script src="js/pager/jquery.tablesorter.pager.js"></script>
 
    <script id="js">$(function(){
 
    // **********************************
    //  Description of ALL pager options
    // **********************************
    var pagerOptions = {
 
        // target the pager markup - see the HTML block below
        container: $(".pager"),
 
        // use this url format "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
        ajaxUrl: null,
 
        // modify the url after all processing has been applied
        customAjaxUrl: function(table, url) { return url; },
 
        // ajax error callback from $.tablesorter.showError function
        // ajaxError: function( config, xhr, settings, exception ){ return exception; };
        // returning false will abort the error message
        ajaxError: null,
 
        // add more ajax settings here
        // see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
        ajaxObject: { dataType: 'json' },
 
        // process ajax so that the data object is returned along with the total number of rows
        ajaxProcessing: null,
 
        // Set this option to false if your table data is preloaded into the table, but you are still using ajax
        processAjaxOnInit: true,
 
        // output string - default is '{page}/{totalPages}'
        // possible variables: {size}, {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
        // also {page:input} & {startRow:input} will add a modifiable input in place of the value
        // In v2.27.7, this can be set as a function
        // output: function(table, pager) { return 'page ' + pager.startRow + ' - ' + pager.endRow; }
        output: '{startRow:input} – {endRow} / {totalRows} rows',
 
        // apply disabled classname (cssDisabled option) to the pager arrows when the rows
        // are 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,
 
        // Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
        savePages : true,
 
        // Saves tablesorter paging to custom key if defined.
        // Key parameter name used by the $.tablesorter.storage function.
        // Useful if you have multiple tables defined
        storageKey:'tablesorter-pager',
 
        // Reset pager to this page after filtering; set to desired page number (zero-based index),
        // or false to not change page at filter start
        pageReset: 0,
 
        // 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: true,
 
        // 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,
 
        // If true, child rows will be counted towards the pager set size
        countChildRows: 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
        cssGoto: '.gotoPage', // select dropdown to allow choosing a page
 
        cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
        cssPageSize: '.pagesize', // page size selector - select 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)
        cssDisabled: 'disabled', // Note there is no period "." in front of this class name
        cssErrorRow: 'tablesorter-errorRow' // ajax error information row
 
    };
 
    $("table")
 
        // Initialize tablesorter
        // ***********************
        .tablesorter({
            theme: 'blue',
            widthFixed: true,
            widgets: ['zebra', 'filter']
        })
 
        // bind to pager events
        // *********************
        .bind('pagerChange pagerComplete pagerInitialized pageMoved', function(e, c){
            var msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
                ' page <span class="typ">' + (c.page + 1) + '/' + c.totalPages + '</span>';
            $('#display')
                .append('<li><span class="str">"' + e.type + msg + '</li>')
                .find('li:first').remove();
        })
 
        // initialize the pager plugin
        // ****************************
        .tablesorterPager(pagerOptions);
 
        // Add two new rows using the "addRows" method
        // the "update" method doesn't work here because not all rows are
        // present in the table when the pager is applied ("removeRows" is false)
        // ***********************************************************************
        var r, $row, num = 50,
            row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>' +
                '<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>';
        $('button:contains(Add)').click(function(){
            // add two rows of random data!
            r = row.replace(/\{[gijmr]\}/g, function(m){
                return {
                    '{i}' : num + 1,
                    '{j}' : num + 2,
                    '{r}' : Math.round(Math.random() * 100),
                    '{g}' : Math.random() > 0.5 ? 'male' : 'female',
                    '{m}' : Math.random() > 0.5 ? 'Mathematics' : 'Languages'
                }[m];
            });
            num = num + 2;
            $row = $(r);
            $('table')
                .find('tbody').append($row)
                .trigger('addRows', [$row]);
            return false;
        });
 
        // Delete a row
        // *************
        $('table').delegate('button.remove', 'click' ,function(){
            var t = $('table');
            // disabling the pager will restore all table rows
            // t.trigger('disablePager');
            // remove chosen row
            $(this).closest('tr').remove();
            // restore pager
            // t.trigger('enablePager');
            t.trigger('update');
            return false;
        });
 
        // Destroy pager / Restore pager
        // **************
        $('button:contains(Destroy)').click(function(){
            // Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
            var $t = $(this);
            if (/Destroy/.test( $t.text() )){
                $('table').trigger('destroyPager');
                $t.text('Restore Pager');
            } else {
                $('table').tablesorterPager(pagerOptions);
                $t.text('Destroy Pager');
            }
            return false;
        });
 
        // Disable / Enable
        // **************
        $('.toggle').click(function(){
            var mode = /Disable/.test( $(this).text() );
            $('table').trigger( (mode ? 'disable' : 'enable') + 'Pager');
            $(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
            return false;
        });
        $('table').bind('pagerChange', function(){
            // pager automatically enables when table is sorted.
            $('.toggle').text('Disable Pager');
        });
 
        // clear storage (page & size)
        $('.clear-pager-data').click(function(){
            // clears user set page & size from local storage, so on page
            // reload the page & size resets to the original settings
            $.tablesorter.storage( $('table'), 'tablesorter-pager', '' );
        });
 
        // go to page 1 showing 10 rows
        $('.goto').click(function(){
            // triggering "pageAndSize" without parameters will reset the
            // pager to page 1 and the original set size (10 by default)
            // $('table').trigger('pageAndSize')
            $('table').trigger('pageAndSize', [1, 10]);
        });
 
});</script>
    <script>
    $(function(){
        $('.clear').click(function(){
            $('#display').html( new Array(6).join('<li> </li>') );
        });
    });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="pager">
        <img src="js/pager/icons/first.png" class="first" alt="First" />
        <img src="js/pager/icons/prev.png" class="prev" alt="Prev" />
        <!-- the "pagedisplay" can be any element, including an input -->
        <span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span>
        <img src="js/pager/icons/next.png" class="next" alt="Next" />
        <img src="js/pager/icons/last.png" class="last" alt="Last" />
        <select class="pagesize" title="Select page size">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="all">All Rows</option>
        </select>
        <select class="gotoPage" title="Select page number"></select>
    </div>
 
<table class="tablesorter">
    <thead>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
            <th class="remove sorter-false"></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>
            <th></th>
        </tr>
    </tfoot>
    <tbody>
        <asp:Repeater ID="Repeater1" runat="server">
         <ItemTemplate>
        <tr onmouseover="CurrentColor=this.style.backgroundColor; this.style.backgroundColor='#FFE9CC';" onmouseout="this.style.backgroundColor=CurrentColor;">
        <td><%#Eval("Name").ToString()%> </td>
        <td><%#Eval("Major").ToString()%> </td>
       <td><%#Eval("Sex").ToString()%> </td>
       <td><%#Eval("English").ToString()%> </td>
       <td><%#Eval("Japanese").ToString()%> </td>
       <td><%#Eval("Calculus").ToString()%> </td>
       <td><%#Eval("Geometry").ToString()%> </td>
       <td><a  href="default.aspx?id=<%#Eval("ID" ).ToString() %>" >edit</a> </td>
        </tr>       
         </ItemTemplate>
        </asp:Repeater>
    </tbody>
</table>
 
<div class="pager">
    <img src="js/pager/icons/first.png" class="first" alt="First" />
    <img src="js/pager/icons/prev.png" class="prev" alt="Prev" />
    <!-- the "pagedisplay" can be any element, including an input -->
    <span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span>
    <img src="js/pager/icons/next.png" class="next" alt="Next" />
    <img src="js/pager/icons/last.png" class="last" alt="Last" />
    <select class="pagesize" title="Select page size">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="all">All Rows</option>
    </select>
    <select class="gotoPage" title="Select page number"></select>
</div>
    </div>
    </form>
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
 
 
 
namespace WebPaingDemo
{
 
 
    /// <summary>
    ///
    /// </summary>
    public partial class WebForm4 : System.Web.UI.Page
    {
 
        /// <summary>
        ///
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.Repeater1.DataSource = bindata();           
                this.Repeater1.DataBind();
            }
        }
        /// <summary>
        ///
        /// </summary>
        /// <returns></returns>
        private DataTable bindata()
        {
            int iResult;
            Random ro = new Random();
 
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", typeof(int));
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("Major", typeof(string));
            dt.Columns.Add("Sex", typeof(string));
            dt.Columns.Add("English", typeof(int));
            dt.Columns.Add("Japanese", typeof(int));
            dt.Columns.Add("Calculus", typeof(int));
            dt.Columns.Add("Geometry", typeof(int));
 
            for (int i = 0; i < 500; i++)
            {
                DataRow row = dt.NewRow();
                row["ID"] = i;
                row["Name"] ="Student"+ i.ToString();
                row["Major"] = "Languages" + i.ToString(); ;
                if (i % 2 == 0)
                {
                    row["Sex"] = "female";
                }
                else
                {
                    row["Sex"] = "male";
                }
                iResult = ro.Next();
                row["English"] = iResult;
                iResult = ro.Next();
                row["Japanese"] = iResult;
                iResult = ro.Next();
                row["Calculus"] = iResult;
                iResult = ro.Next();
                row["Geometry"] = iResult;
               dt.Rows.Add(row);
            }
             
 
 
            return dt;
 
        }
 
    }
}

　　

posted @   ®Geovin Du Dream Park™  阅读(360)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2012-11-22 Csharp: TreeView Control
2010-11-22 Dynamic Fonts动态设置字体大小存入Cookie
2010-11-22 CSS Image Rollovers翻转效果Image Sprites图片精灵
2010-11-22 Image Reflection with jQuery and MooTools Example实现图片半透明渐变倒影效果
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示