javascript:jQuery tablesorter 2.0
https://mottie.github.io/tablesorter/docs/index.html
1.GridView
<%@ 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>
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
<%@ 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>
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; } }
}
javascript:jQuery tablesorter 2.0的更多相关文章
- web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）
函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...
- jQuery plugin: Tablesorter 2.0
http://mottie.github.io/tablesorter/docs/example-pager.htmlhttp://tablesorter.com/docs/example-pager ...
- javascript table排序之jquery.tablesorter.js
table排序 jquery.tablesorter.js 一.Demo下载地址: 1.tablesorter.js下载地址: http://download.csdn.net/detail/zhan ...
- jquery.tablesorter.js 学习笔记
jquery.tablesorter.js 一般情况下,表格数据的排序方式有两种,第一种是让后端服务将排序后的数据直接输出,另外一种方式就是使用客户端排序,而jquery.tablesorter.js ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- 在线运行Javascript,Jquery,HTML,CSS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...
- 大量Javascript/JQuery学习教程电子书合集
［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- 【推荐分享】大量JavaScript/jQuery电子书籍教程pdf合集下载
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
随机推荐
- Delphi使用iTools安卓模拟器
Delphi使用iTools安卓模拟器 1.去官网下载或https://pc.qq.com/detail/11/detail_22131.html 2.安装后,需要通过设置功能,设置一下分辩率,变成手 ...
- LeNet,AlexNet,GoogleLeNet,VggNet等网络对比
CNN的发展史 上一篇回顾讲的是2006年Hinton他们的Science Paper,当时提到,2006年虽然Deep Learning的概念被提出来了,但是学术界的大家还是表示不服.当时有流传的段 ...
- 调试Release发布版程序的Crash错误(转)
http://blog.sina.com.cn/s/blog_48f93b530100fsln.html 在Windows平台下用C++开发应用程序,最不想见到的情况恐怕就是程序崩溃,而要想解决引起问 ...
- Lerning Entity Framework 6 ------ Joins and Left outer Joins
Joins allow developers to combine data from multiple tables into a sigle query. Let's have a look at ...
- Flask中的模板语言jinja2
jinja2介绍 jinja2是Flask作者开发的一个模板系统,起初是仿django模板的一个模板引擎,为Flask提供模板支持,由于其灵活,快速和安全等优点被广泛使用. jinja2的优点 jin ...
- getaddrinfo 报错 Invalid value for ai_flags
最近改了游戏的网络层代码,运行 Android 版的时候 getaddrinfo 报错 Invalid value for ai_flags. ai_flags 设置如下: struct addrin ...
- Eclipse 中打包插件 Fat Jar 的安装与使用
Eclipse可以安装一个叫Fat Jar的插件,用这个插件打包非常方便,Fat Jar的功能非常强大. 首先要下载Fat Jar,下载地址:https://sourceforge.net/proje ...
- fiddler 使用方法汇总
作为网络开发人员,怎能不使用一些抓包工具呢?fiddler是个不错的选择. 不过,一般情况下,我们往往使用浏览器自带的控制台的[网络]选项就可以达到查看数据的通信情况了,当然,一些浏览器不容易捕捉的事 ...
- Hexo的next主题安装
通过Git+Hexo搭建的个人博客地址:https://liangh.top/ 1.使用git克隆最新版本 2.先在themes目录创建一个next文件夹,然后在hexo站点目录下右键打开Git Ba ...
- linux中awk的使用
在linux中awk绝对是核心工具,特别是在查找搜索这一领域,和掌握sed命令一样重要 下面为awk的一些基本知识,基于这些知识,可以让你随意操控一个文件: 在awk中:()括号为条件块,{}为执行的 ...