一、jsp页面定义table
<div><table id="dg"></table></div>
二、js页面加载table
$(function () {
test1();
});
var test1 = function () {
var m_test_name = "测试";
var pageNumber = 1;
var pageSize = 20;
init_datagrid();
function init_datagrid() {
var arr_columns = test_dg_columns();
$("#dg").datagrid({
url: 'temp/test/queryTest',
singleSelect: true,
remoteSort: true, //定义从服务器对数据进行排序。
pagination: true, //在DataGrid控件底部显示分页工具栏。
pageNumber: pageNumber,
pageSize: pageSize,
pageList: [10,15,20],
method: 'post',
columns: [arr_columns],
rownumbers: true,
loadMsg: '正在加载数据',
checkbox: true,
title: '表单 -- ' + m_test_name,
emptyMsg: '列表为空',
selectOnCheck: false,
checkOnSelect: false
});
}
function test_dg_columns() {
var arr = new Array();
arr.push({"field": "yi", "title": 'test1', "width": '19%', "align": 'center',sortable:true});
arr.push({"field": "er", "title": 'test2', "width": '20%', "align": 'center',sortable:true});
arr.push({"field": "san", "title": 'test3', "width": '20%', "align": 'center',sortable:true});
arr.push({"field": "si", "title": 'test4', "width": '20%', "align": 'center',sortable:true});
arr.push({"field": "wu", "title": 'test5', "width": '20%', "align": 'center',sortable:true});
return arr;
}
}
三、后台controller接收前台传来的page、rows、sort、order(由于测试没有从数据库查数据,用的是map,所以排序时map里的list使用了Collections.sort()排序,分页时把map里的list使用subList()获取当前页的数据)
@Controller
@RequestMapping(value="temp/test")
public class TestController extends BaseEntityController<test>{
@Autowired
TestService testService;
@RequestMapping(value = "queryTest",method=RequestMethod.POST)
@ResponseBody
@SystemControllerLog(description = "测试查询")
public Object queryTest(HttpServletRequest request){
int pageNumber = Integer.parseInt(request.getParameter("page")); //获取当前页码
int pageSize = Integer.parseInt(request.getParameter("rows")); //获取每页显示多少行
String sort = request.getParameter("sort"); //获取排序字段
String order = request.getParameter("order"); //获取升序降序
try {
Map<String, Object> map = testService.querytest();
List<Map<String, Object>> list = (List<Map<String, Object>>) map.get("rows");
//排序
if(StringUtils.isNotBlank(sort)&&StringUtils.isNotBlank(order)) {
if("asc".equals(order)) { //升序
Collections.sort(list, new Comparator<Map<String, Object>>() {
@Override
public int compare(Map<String, Object> o1, Map<String, Object> o2) {
if(o1.get(sort) instanceof Integer && o2.get(sort) instanceof Integer) { //如果是integer整数类型,比较两个数,大于0表示正序,小于0表示逆序
return new Integer((int)o1.get(sort)).compareTo(new Integer((int)o2.get(sort)));
}
if(o1.get(sort) instanceof Double && o2.get(sort) instanceof Double) { //如果是Double整数类型,比较两个数,大于0表示正序,小于0表示逆序
return new Double((double)o1.get(sort)).compareTo(new Double((double)o2.get(sort)));
}
return ((String) o1.get(sort)).length()-((String) o2.get(sort)).length(); //字符串类型比较长度
}
});
}else { //降序
Collections.sort(list, new Comparator<Map<String, Object>>() {
@Override
public int compare(Map<String, Object> o1, Map<String, Object> o2) {
if(o1.get(sort) instanceof Integer && o2.get(sort) instanceof Integer) { //如果是integer整数类型,比较两个数,大于0表示正序,小于0表示逆序
return new Integer((int)o2.get(sort)).compareTo(new Integer((int)o1.get(sort)));
}
if(o1.get(sort) instanceof Double && o2.get(sort) instanceof Double) { //如果是Double整数类型,比较两个数,大于0表示正序,小于0表示逆序
return new Double((double)o2.get(sort)).compareTo(new Double((double)o1.get(sort)));
}
return ((String) o2.get(sort)).length()-((String) o1.get(sort)).length(); //字符串类型比较长度
}
});
}
}
//分页
int fromIndex = pageSize*(pageNumber-1);
int toIndex = pageSize*pageNumber;
int total = (int)map.get("total"); //总条数
if(toIndex>total) {
toIndex = total;
}
list = list.subList(fromIndex, toIndex); //分页
map.put("rows", list);
return map;
} catch (Exception e) {
e.printStackTrace();
}
return "failed";
}
}
注:public int compare(Object o1, Object o2) 返回一个基本类型的整型
如果要按照升序排序,
则o1 小于o2,返回-1(负数),相等返回0,01大于02返回1(正数)
如果要按照降序排序
则o1 小于o2,返回1(正数),相等返回0,01大于02返回-1(负数)
如果比大小可以用compareTo方法
public int compareTo( NumberSubClass referenceName )
public class Test{
public static void main(String args[]){
Integer x = 5;
System.out.println(x.compareTo(3));
System.out.println(x.compareTo(5));
System.out.println(x.compareTo(8));
}
}
1
0
-1
四、在service里定义测试用的数据
public Map<String, Object> querytest() {
List<Map<String, Object>> l = new ArrayList<>();
Map<String, Object> map = new HashMap<>();
int total = 30;
map.put("total", total);
for (int i = 1; i <= total; i++) {
Map<String, Object> m = new HashMap<>();
m.put("yi", i*2+0.5);
m.put("er", i+47);
m.put("san", "kasaki"+i);
m.put("si", i);
m.put("wu", 500/i);
l.add(m);
}
map.put("rows", l);
return map;
}
五、页面效果
点击排序