datatables 带查询条件java服务端分页处理

最新推荐文章于 2024-06-04 09:59:52 发布

绝影A

最新推荐文章于 2024-06-04 09:59:52 发布

阅读量1.1w

点赞数 2

分类专栏： java-web

本文链接：https://blog.csdn.net/lllliulin/article/details/51193004

版权

java-web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

使用datatables自带后台查询
前台代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico"
    href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

<link rel="stylesheet" type="text/css"
    href="../../js/DataTables-1.10.8/media/css/jquery.dataTables.css">
<script type="text/javascript" language="javascript"
    src="../../js/DataTables-1.10.8/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript"
    src="../../js/DataTables-1.10.8/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">
    var table;
$(document).ready(function() {
    table = $('#example').DataTable( {
        "pagingType": "simple_numbers",//设置分页控件的模式
         searching: false,//屏蔽datatales的查询框
         aLengthMenu:[10],//设置一页展示10条记录
         "bLengthChange": false,//屏蔽tables的一页展示多少条记录的下拉列表
         "oLanguage": {  //对表格国际化
            "sLengthMenu": "每页显示 _MENU_条",  
            "sZeroRecords": "没有找到符合条件的数据",  
        //  "sProcessing": "&lt;img src=’./loading.gif’ /&gt;",  
            "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",  
            "sInfoEmpty": "木有记录",  
            "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",  
            "sSearch": "搜索：",  
            "oPaginate": {  
            "sFirst": "首页",  
            "sPrevious": "前一页",  
            "sNext": "后一页",  
            "sLast": "尾页"  

            }  
        },
    "processing": true, //打开数据加载时的等待效果
        "serverSide": true,//打开后台分页
        "ajax": {
            "url": "../../alarms/datatablesTest", 
            "dataSrc": "aaData", 
            "data": function ( d ) {
                var level1 = $('#level1').val();
                //添加额外的参数传给服务器
                d.extra_search = level1;
            }
        },
        "columns": [
            { "data": "total" },
            { "data": "level" }
        ]

    } );
} );


function search1()
{
    table.ajax.reload();
}

    </script>
</head>

<body class="dt-example">


    <div>
        <input type="text" id="level1"> 
        <input type="button" onclick="search1()"  value="查询">
    </div>

    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
            </tr>
        </thead>
    </table>



</body>
</html>

java代码如下，使用spring的 @ResponseBody将结果转换成json格式返回给前台

@RequestMapping(value="/datatablesTest", method=RequestMethod.GET)
    @ResponseBody
    public DatatablesViewPage<Alarm> datatablesTest(HttpServletRequest request){
//获取分页控件的信息
        String start = request.getParameter("start");
        System.out.println(start);
                String length = request.getParameter("length");
        System.out.println(length);
//获取前台额外传递过来的查询条件
        String extra_search = request.getParameter("extra_search");
        System.out.println(extra_search);
                //随便组织的查询结果
        List<Alarm> list  = new ArrayList<Alarm>();
        Alarm alarm = new Alarm();
        alarm.setLevel(1);
        alarm.setTotal(100L);
        list.add(alarm);
        alarm = new Alarm();
        alarm.setLevel(2);
        alarm.setTotal(100L);
        list.add(alarm);


        DatatablesViewPage<Alarm> view = new DatatablesViewPage<Alarm>();
        view.setiTotalDisplayRecords(100);
        view.setiTotalRecords(100);

        view.setAaData(list);
        return view;
    }

DatatablesViewPage的声明如下：

public class DatatablesViewPage<T> {

    private List<T> aaData; //aaData 与datatales 加载的“dataSrc"对应
    private int iTotalDisplayRecords; 
    private int iTotalRecords;
    public DatatablesViewPage() {

    }
//get set方法 此处省略

}

在后台传输数据也可以用fastjson ；

@ResponseBody
    @RequestMapping("/datatable2")
    public JSON getTable2(String aoData){
        String sEcho = "";// 记录操作的次数  每次加1
        String iDisplayStart = "";// 起始
        String iDisplayLength = "";// size
        String sSearch = "";// 搜索的关键字
        int count = 1 ;  //查询出来的数量
        JSONArray alldata = JSON.parseArray(aoData);
        for (int i = 0; i <alldata.size() ; i++) {
            JSONObject obj = (JSONObject) alldata.get(i);
            if (obj.get("name").equals("sEcho"))
                sEcho = obj.get("value").toString();
            if (obj.get("name").equals("iDisplayStart"))
                iDisplayStart = obj.get("value").toString();
            if (obj.get("name").equals("iDisplayLength"))
                iDisplayLength = obj.get("value").toString();
            if (obj.get("name").equals("sSearch"))
                sSearch = obj.get("value").toString();
        }
        DataTableModel u1 = new DataTableModel();
        u1.setFirst_name("Airi");
        u1.setLast_name("Satou");
        u1.setPosition("Accountant");
        u1.setOffice("Tokyo");
        u1.setStart_date("28th Nov 08");
        u1.setSalary("$162,700");

        Map<String,Object> listMap = new HashMap<String, Object>();
        List<DataTableModel> list = new ArrayList<DataTableModel>();
        list.add(u1);
        listMap.put("iTotalRecords",count);
        listMap.put("sEcho",Integer.parseInt(sEcho)+1);
        listMap.put("iTotalDisplayRecords",count);
        listMap.put("aaData",list);
        return (JSON)JSON.toJSON(listMap);
    }

绝影A

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
datatables 带查询条件java服务端分页处理

使用datatables自带后台查询前台代码：<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"><meta name="viewport" content
复制链接

扫一扫