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

2024-10-03 10:45:58

使用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 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);
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

对比分析Django的Q查询及AngularJS的Datatables分页插件

使用Q查询,首先要导入Q模块: from django.db.models import Q 可以组合使用&,|操作符用于多个Q的对象,产生一个新的Q对象,Q对象也可以用~操作符放在前面表示否定,如下例所示: if search: keywords_list = search.split(' ') query_list = [Q(status__icontains=get_success_fail_status(keyword)) if get_success_fail_keyword_stat
jQuery DataTables插件自定义Ajax分页实例解析

一.问题描述园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

前言基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了SpringMVC国际化效果 DataTable表格关键字查询自定义关键字查询,非DataTable Search 代码 HTML代码查询条件代码  <div class="row-fluid"> <di
ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

一直想自己做个博客网站,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之后,发现即使你用了bootstrap还是要自己写css样式,都是自学的,前端真的很垃圾,在网上找了很多UI,以下是各种UI的地址,需要的可以去看看: H-ui:http://www.h-ui.net/H-ui.admin.shtml ,是一个前端大牛弄得,模仿bootstrap,做适合中国网上的UI. Ama
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 主要功能分页,即时搜索和排序几乎支持任何数据源:DOM, javascript, Ajax 和服务器处理支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns -- 丰富多样的option和强大的API 支持国际化超过2900+个单元测试免
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" rel="external nof
ThinkPHP整合datatables实现服务端分页的示例代码

最近做东西有一个需求,因为数据量很大,在这里我决定使用datatables的服务端分页,同时还需要传递查询条件到服务端.在网上搜索的大部分文章都感觉有些误差,于是自己封装了一下,主要配置/工具为: 服务端:php(使用thinkphp) 页面样式来自于H-ui框架(datatables版本为1.10.0) 主要修改(databases)配置项为: 1) bProcessing:true 使用ajax源 2) serverSide:true 使用服务端分页 3) createdRow:functi
Layui实现带查询条件的分页

本文实例为大家分享了Layui实现带查询条件的分页,供大家参考,具体内容如下这个前端UI框架是真的让人又爱又恨呐!想了很久的方案才行的通这是全部源码: {include file="../../../application/admin/view/public/head" /} <div class="page-container p10"> <form class="layui-form " method="pos
存储过程实现(可带查询条件/万能分页/通用)

假设数据库中有张表,表名是UserName,字段分别是ID(int),Name(nvarchar),Age(int). 如果不带查询条件存储过程是: 复制代码代码如下: CREATE PROCEDURE [dbo].[UserName] @pageIndex int, @pageSize int AS declare @min int; declare @max int; set @min=@pageSize*(@pageIndex-1)+1; set @max=@pageSize*@page
jquery datatable服务端分页

OK,上次完成了客户端的分页,这次我们就在上一次的Demo上进行修改,来实现服务端的分页~ js代码: <script type="text/javascript"> $(document).ready(function() { $('#table_id_example').DataTable({ "bProcessing" : false, //是否显示加载 "sAjaxSource" : '/datatableDemo/user/
mysql/Java服务端对emoji的支持与问题解决方法详解

本文实例讲述了mysql Java服务端对emoji的支持与问题解决方法.分享给大家供大家参考,具体如下: 问题描述将底层抓取的微博数据存入mysql,有些数据存入失败,查看Tomcat后,核心错误信息如下: // 抛出字符集不支持的异常 sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x97\xF0\x9F...' for column 'CONTENT' at row 1 原因分析 MYSQL 5.5 之前, utf8 编码只
Vue请求java服务端并返回数据代码实例

这篇文章主要介绍了Vue请求java服务端并返回数据代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下最近在自学vue怎么与java进行数据交互.其实axios还是挺简单的,与ajax请求几乎一样,无外乎也就是要解决下跨域的问题. 废话不多说了,直接贴代码,一看就懂! //向springmvc Controller发起请求,传递一个参数 get请求(带参数传递) axios.get('http://127.0.0.1:8088/inas/
Java实现TCP/IP协议的收发数据（服务端）代码实例

这篇文章主要介绍了Java实现TCP/IP协议的收发数据(服务端)代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下功能如下: 注: 只有服务端,没有客户端,测试时采用第三方软件作为客户端的. 收发数据目前能正常收发数据,只是中文的会变成乱码显示. 采用Thread类实现一个收发数据的线程. 服务端代码: import java.io.IOException; import java.io.InputStream; import java
java多线程数据分页处理实例讲解

在数据的最终结果上,我们能够通过分类的方法,准备的筛选出不同类别结果的信息.这里我们发散一下思维,在Java中对于数据大量处理的,多线程是一个非常常见的代表,我们可以用分页来处理多线程的数据问题.下面我们对分类的类型进行了解,然后带来两种分页在多线程的逻辑. 1.常见的分页类型传统的:采用传统的分页方式,可以明确的获取数据信息,如有多少条数据,分多少页显示等. 下拉式:采用下拉式的分页方式,一般无法获取明确的数据数量相关的信息,但在分页操作以后,仍然可以看到之前查询的数据. 2.分页式查询逻辑

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

相关推荐

随机推荐