java項目中使用datatables如何實現(xiàn)一個帶條件查詢功能

發(fā)布時間：2020-11-21 16:24:02 來源：億速云閱讀：335 作者：Leah 欄目：編程語言

這篇文章給大家介紹java項目中使用datatables如何實現(xiàn)一個帶條件查詢功能，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

使用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",//設(shè)置分頁控件的模式
     searching: false,//屏蔽datatales的查詢框
     aLengthMenu:[10],//設(shè)置一頁展示10條記錄
     "bLengthChange": false,//屏蔽tables的一頁展示多少條記錄的下拉列表
     "oLanguage": { //對表格國際化
      "sLengthMenu": "每頁顯示 _MENU_條", 
      "sZeroRecords": "沒有找到符合條件的數(shù)據(jù)", 
    // "sProcessing": "&lt;img src='./loading.gif' /&gt;", 
      "sInfo": "當前第 _START_ - _END_ 條　共計 _TOTAL_ 條", 
      "sInfoEmpty": "木有記錄", 
      "sInfoFiltered": "(從 _MAX_ 條記錄中過濾)", 
      "sSearch": "搜索：", 
      "oPaginate": { 
      "sFirst": "首頁", 
      "sPrevious": "前一頁", 
      "sNext": "后一頁", 
      "sLast": "尾頁" 

      } 
    },
  "processing": true, //打開數(shù)據(jù)加載時的等待效果
    "serverSide": true,//打開后臺分頁
    "ajax": {
      "url": "../../alarms/datatablesTest", 
      "dataSrc": "aaData", 
      "data": function ( d ) {
        var level1 = $('#level1').val();
        //添加額外的參數(shù)傳給服務器
        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將結(jié)果轉(zhuǎn)換成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);
        //隨便組織的查詢結(jié)果
    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方法 此處省略

}

在后臺傳輸數(shù)據(jù)也可以用fastjson ；

@ResponseBody
  @RequestMapping("/datatable2")
  public JSON getTable2(String aoData){
    String sEcho = "";// 記錄操作的次數(shù) 每次加1
    String iDisplayStart = "";// 起始
    String iDisplayLength = "";// size
    String sSearch = "";// 搜索的關(guān)鍵字
    int count = 1 ; //查詢出來的數(shù)量
    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);
  }

關(guān)于java項目中使用datatables如何實現(xiàn)一個帶條件查詢功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

java項目中使用datatables如何實現(xiàn)一個帶條件查詢功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽