finereport怎么实现点击表头排序 用jquery实现表格列排序

finereport怎么实现点击表头排序

1、打开模板
2、修改数据集
将原来的数据集修改为：SELECT * FROM 订单 order by 客户ID，根据字符型字段客户ID对数据进行升序排序，另存为Order_A.cpt：
3、超级链接设置
右击客户ID表头所在单元格B1，选择超级链接，点击网络报表，在在网络报表的路径处选择模板，Order_A和Order_B的设置分别如下：Order_A.cpt：

Order_B.cpt：

4、效果查看
打开Order_A.cpt，点击分页预览，看到的是按照客户ID的升序排序，直接点击客户ID，则会按照客户ID进行降序排序，再次点击客户ID，则会又按照客户ID进行升序排序。

用jquery实现表格列排序？

$(document).ready(function()
{
//插件的形式
jQuery.fn.alterRowColors = function()
{
$(tbody tr:odd, this).removeClass(even).addClass(odd)
$(tbody tr:even, this).removeClass(odd).addClass(even)
return this
}
//1.此时的函数是作为jQuery.fn的一个新属性定义的，不是孤立的函数，这样就把该函数注册成了一个插件，
//2.使用关键字this，在一个插件内部，this表示的是调用该插件的jQuery对象，
//3.最后在函数的末尾返回this,返回这个值可以使这个新方法能够继续连缀其他的方法。

var $sortOrder = 0 //排序类型 1表示升序，0表示降序
var $table = $(table#shop)

$table.alterRowColors()

$(th, $table).each(function( column )
{
//处理三种有可能存在的排序字段，比较方法
var findSortKey
if( $(this).is(.sort-title) || $(this).is(.sort-author) )
{
findSortKey = function( $cell )
{
return $cell.find(.sort-title).text().toUpperCase() $cell.text().toUpperCase()
}
}
else if( $(this).is(.sort-date) )
{
findSortKey = function( $cell )
{
return Date.parse(1 $cell.text())
}
}
else if( $(this).is(.sort-price) )
{
findSortKey = function( $cell )
{
var key = parseFloat($cell.text().replace(/^[^d.]*/, ))
return isNaN(key) ? 0 : key
}
}

//排序
if( findSortKey )
{
$(this).addClass(clickable).hover(function()
{
$(this).addClass(hover)
var $title = $sortOrder == 0 ? 升序 : 降序
$(this).attr(title, 按 $(this).html() $title 排列)
}, function()
{
$(this).removeClass(hover)
}).click(function()
{
$sortOrder = $sortOrder == 0 ? 1 : 0

var rows = $table.find(tbody > tr).get()

$.each( rows, function( index, row )
{
row.sortKey = findSortKey($(row).children(td).eq(column))
})
//排序方法
rows.sort(function( a, b )
{
if( $sortOrder == 1 )
{
//升序
if(a.sortKey < b.sortKey) return -1
if(a.sortKey > b.sortKey) return 1
return 0
}
else
{
//降序
if(a.sortKey < b.sortKey) return 1
if(a.sortKey > b.sortKey) return -1
return 0
}
})
//排序后的对象添加给$table
$.each( rows, function( index, row )
{
$table.children(tbody).append(row)
row.sortKey = null
})

//显著标明是通过某一列排序的
$table.find(td).removeClass(sorted)
.filter(:nth-child( (column 1) )).addClass(sorted)

//重新赋予奇偶行的样式
$table.alterRowColors()
})
}
})

//分页效果
var currentPage = 0 //当前页
var pageSize = 10 //每页行数（不包括表头）
//绑定分页事件
$table.bind(repaginate, function()
{
$table.find(tbody tr).hide()
.slice(currentPage * pageSize, (currentPage 1) * pageSize).show()
})

var numRows = $table.find(tbody tr).length //记录宗条数
var numPages = Math.ceil(numRows/pageSize) //总页数

var $pager = $() //分页div
for( var page = 0 page < numPages page )
{
//为分页标签加上链接
$( (page 1) )
.bind("click", { "newPage": page }, function(event)
{
currentPage = event.data["newPage"]
$table.trigger("repaginate")
})
.appendTo($pager)

$pager.append("  ")
}
$pager.insertAfter($table) //分页div插入table

$table.trigger("repaginate") //初始化

})