这篇文章给大家介绍java项目中使用datatables如何实现一个带条件查询功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
使用datatables自带后台查询
前台代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" rel="external nofollow" > <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" rel="external nofollow" > <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": "<img src='./loading.gif' />", "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 search2() { table.ajax.reload(); } </script> </head> <body class="dt-example"> <div> <input type="text" id="level1"> <input type="button" onclick="search2()" 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); }
关于java项目中使用datatables如何实现一个带条件查询功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。