`

jquery datatable 多条件查询

 
阅读更多

可以根据查询条件重新生成一个新的datatable

先销毁,再生成

dataTable.fnDestroy(); 

var dataTable = $('#example').dataTable({
		"autoWidth":false,
	 	"bPaginate": true,  //是否显示分页
	 	"bFilter": true, //搜索栏
	 	"bProcessing": true, //加载数据时显示正在加载信息
	 	"bServerSide": true, //指定从服务器端获取数据
		"sAjaxSource" : "xxx",
		"aoColumns": [
             { "mData": "ruleName" },
             { "mData": "md5" },
             { "mData": "objectType" },
             { "mData": "domainName" }
         ]
		
	});
	//查询按钮
    document.getElementById("queryBtn").onclick = function() {
    	var rule_name = $("#rule_name_query").val();
		var object_type = $("#object_type_query").val();
		var domain_name = $("#domain_name_query").val();
		
		dataTable.fnDestroy();

    	$('#example').dataTable({
    		"autoWidth":false,
    	 	"bPaginate": true,  //是否显示分页
    	 	"bFilter": true, //搜索栏
    	 	"bProcessing": true, //加载数据时显示正在加载信息
    	 	"bServerSide": true, //指定从服务器端获取数据
    		"sAjaxSource" : "xxxx?xx="
				+ 11+ "&xx=" + 22+ "&xx=" + 33,
    		"aoColumns": [
                 { "mData": "ruleName" },
                 { "mData": "md5" },
                 { "mData": "objectType" },
                 { "mData": "domainName" }
             ]
    		
    	});
    }

 

分享到:
评论

相关推荐

    jQuery Datatable 多个查询条件自定义提交事件(推荐)

    本篇文章将详细探讨如何在jQuery DataTables中实现多个查询条件的自定义提交事件。 首先,我们需要在用户界面创建查询条件的输入字段。例如,我们可以添加两个日期选择器(datetimepicker)来让用户选择开始时间和...

    Jquery dataTable后台获取数据示例

    前端传递的搜索关键词会在请求参数中,后台解析后在查询条件中添加`LIKE`或`IN`等条件,再执行查询。 ### 实现步骤 1. **引入依赖**: 首先确保项目中已经包含了jQuery、DataTables以及对应的CSS和JS文件,如果使用...

    struts,spring,mybatis,jquery,datatable,bootstrap集成

    MyBatis 支持动态SQL,能够根据条件灵活地生成不同查询,同时也提供了事务管理和结果映射等功能。 jQuery 是一个流行的JavaScript库,极大地简化了DOM操作、事件处理、动画效果和Ajax交互。它的API简洁易用,使得...

    jquery datatable服务端分页

    jQuery DataTable服务端分页是一种在服务器端处理分页数据的技术,而不是在客户端处理。这种方式可以减少客户端处理数据的压力,特别是在数据量较大时。服务端分页可以利用服务器强大的处理能力来完成分页操作,然后...

    jquery dataTable 获取某行数据

    在JavaScript的前端开发中,jQuery DataTable 是一个非常实用的库,它提供了丰富的功能来操作和...希望本文的内容对你在学习或工作中有所帮助,记得持续关注和学习jQuery DataTables的更多功能以提升你的前端开发技能。

    jquery DataTable实现前后台动态分页

    jQuery DataTable 是一款强大的 jQuery 插件,用于创建功能丰富的数据表,包括排序、搜索、分页等。在本文中,我们将深入探讨如何使用 jQuery DataTable 实现后台动态分页。 首先,我们需要在 HTML 页面中设置一个...

    用JQuery实现table按列分组(简单常用

    总结来说,利用JQuery实现table按列分组,无论是通过列索引还是列name值,都需要遍历表格数据并根据分组条件进行分组。理解这一过程对于优化前端数据展示,提升用户体验有着重要作用。同时,了解和掌握JQuery的基本...

    jquery datatables 所需文件 官方下载的

    这只是一个基本的初始化,实际应用中你可能需要配置更多的参数,如排序列、服务器端处理、自定义列等,以满足特定项目需求。 总之,`jQuery DataTables` 是一个强大的数据展示工具,通过其丰富的功能和易于扩展的...

    前端开发:实现DataTable表格内的条件查询

    内容概要:本文档详细介绍了如何在网页上构建一个带有多种过滤条件的表格,其中包括模糊查询和多条件组合查询。具体来说,通过使用前端的JQuery来动态地向表格中添加行与列,并通过后台控制器(Controller)实现从...

    DataTable案例.rar

    DataTable是一个广泛使用的开源jQuery插件,它能提供丰富的功能,如数据的排序、搜索、分页以及各种导出选项。 描述中提到的"实现数据分页、导出excel、导出pdf、打印功能"是DataTable的主要特性。数据分页是大数据...

    jquery datatable后台封装数据示例代码

    在实际的项目中,`getDataList()`方法会根据传入的参数从数据库中获取数据,这可能涉及到SQL查询,包括WHERE条件的构造(使用`objQueryMap`中的键值对作为条件)、ORDER BY子句(根据`strSortId`和`strSort`)以及...

    datatable的例子使用--增加删除修改查询

    4. **查询(Query)**:查询功能允许用户根据特定条件查找数据。DataTable提供了内置的搜索框,用户输入关键词后,插件会自动筛选符合的行。此外,还可以通过设置高级搜索条件,如日期范围、数字范围等,实现更复杂...

    datatable+bootstrap

    DataTable是jQuery的一个插件,提供了排序、过滤、分页等多种功能,而Bootstrap则是一个流行的前端开发框架,提供了一系列预设的样式和组件,使得网页设计更加美观和响应式。 在描述中提到的"datatable 自定义传参...

    dataTable过滤重复数据并导出word的代码

    1. 数据去重算法:除了根据ID直接查询数据库外,可能还需要根据业务规则定义更复杂的去重条件。 2. 错误处理:当处理数据时遇到异常或错误,应有适当的错误处理机制。 3. Word文档生成:需要找到合适的方法或库(如...

    jQueryAjaxDataTable

    - **分页**:DataTable可以自动将大量数据分割成多页显示,用户可以通过导航按钮切换页面。 - **排序**:用户可以点击列头对数据进行升序或降序排序。 - **搜索**:提供全局搜索框,允许用户快速查找特定信息。 - **...

    dataTable java接收参数工具类

    1. **DataTable**:DataTable是jQuery的一个插件,它提供了强大的数据展示功能,如分页、排序、过滤等。在前后端分离的架构中,前端通过Ajax请求获取服务器端的数据,这些请求通常包含了DataTable的配置信息,如当前...

    jQuery Ajax实现Select多级关联动态绑定数据的实例代码

    jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示: 相比最原始的版本,美化后的选择插件可以说是很漂亮了且功能更加强大(这里不说了,自行发掘吧)。这里主要是添加了它的特有属性并调用 class=”...

    Laravel开发-laravel-datatable

    通过 `with` 方法进行预加载关联关系,使用 `->where()` 或 `->orWhere()` 添加查询条件,可以有效避免 N+1 查询问题。 总之,`laravel-datatable` 为 Laravel 应用程序提供了强大且灵活的数据表解决方案,简化了与...

    datatable java web运行demo 包含增删改查

    1. **数据获取**:前端`Datatable`会发送Ajax请求到后端,请求参数包括分页、排序和搜索条件。后端接收到这些请求后,根据参数查询数据库并返回相应的数据。 2. **数据展示**:后端返回的数据会被`Datatable`解析并...

Global site tag (gtag.js) - Google Analytics