关闭

jquery datatables 1.10.9 搜索

标签: jquerydatatble
550人阅读 评论(0) 收藏 举报
分类:

原图


如图所示把右上角的搜索框去掉,然后自己写左上角的搜索框  


隐藏搜索框设置 :"searching": false,

var table;
$(document).ready(function() {
	
	 table=$("#example").dataTable({
				"bProcessing" : true,
				"bServerSide" : true,
				"searching": false,
				 "lengthChange": false,
				"bAutoWidth": false,
				"sort" : "position",
				"bStateSave" : false,
				"iDisplayLength" : 10,
				"iDisplayStart" : 0,
				"sAjaxSource" : url
				"aoColumns": [
			
				{
		            "mData": "uuid",
		            "orderable": false, // 禁用排序
		            "sDefaultContent": "",
		            "mRender": function ( data, type, full ) {
		            	//alert(data);
		               return   '<input type="checkbox"  onclick="oncheck(this)" value="'+data+'">';
		                       },
		            "sWidth":"1%"
		      }, {
		            "mData": "ruleName",
		            "sDefaultContent": "",
		            "sWidth":"10%"
		      }, {
		            "mData": "regular",
		            "sDefaultContent": "",
		            "sWidth":"10%"
		      }, {
		            "mData": "createTime",
		            "sDefaultContent": "",
		            "sWidth":"10%"
		      }, {
		            "mData": "fileName",
		            "sDefaultContent": "",
		            "orderable": false, // 禁用排序
		              "mRender": function ( data, type, full ) {
		                 return   '<a style="cursor:pointer" onclick="downloadFile('+"'"+full.uuid+"'"+')">'+data+'</a>';
		                       },
		            "sWidth":"10%"
		      }, {
		          "mData":null,
		          "orderable": false, // 禁用排序
		       //   "sDefaultContent": '<a href="javascript:void(0)" class="btn btn-primary">删除</a>',
		           "mRender": function ( data, type, full ) {

		                 return   '<a href="javascript:void(0)" class="optionAction"   onclick="del('+"'"+data.uuid+"'"+')" ><i class="fa fa-trash" style=""></i></a><a href="javascript:loadhtml(\''+PATH+'/page/edit.jsp?uuid='+data.uuid+'\')" class="optionAction" style="margin-left:8px;"><i class=\"fa fa-pencil\"></i></a>';
		                       },
		          "sWidth":"20%"
		    }],
		    "oLanguage": { // 国际化配置
		        "sProcessing": "正在获取数据,请稍后...",
		       /* "sLengthMenu": "显示 _MENU_ 条",*/
		        "sZeroRecords": "没有您要的内容",
		        "sInfo": "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
		        "sInfoEmpty": "记录数为0",
		        "sInfoFiltered": "(全部记录数 _MAX_ 条)",
		        "sInfoPostFix": "",
		        "sSearch": "搜索",
		        "sUrl": "",
		        "oPaginate": {
		            "sFirst": "第一页",
		            "sPrevious": "上一页",
		            "sNext": "下一页",
		            "sLast": "最后一页"    
		        }
    }});
	
});


添加搜索 绑定事件

 

  //搜索框
	$('#Search').on( 'click', function () {
		var val = $('#search_val').val();//获取我们自己定义的input值
		table.fnSettings().sAjaxSource="url?sSearch="+val;
		table.fnDraw();
	});




0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

如何在DataTable中查找数据

一、在DataTable中查找 1. 使用Select方法查找没有主键的表,或者通过非主键字段查找。 DataTable本身有一个select方法,返回的是一个DataRow的数组: ...
  • wfflzt
  • wfflzt
  • 2015-07-22 21:28
  • 979

dataTables的选项——特性及国际化语言

一.特性(功能) 1.jQueryUI:控制是否使用jquerui的样式(需要引入jqueryui的css) eg: "jQueryUI": "true",  //默认是false 2.autoWid...
  • gao_xu_520
  • gao_xu_520
  • 2017-11-23 10:44
  • 131

dataTables 用法荟萃

此文为本人所写,但是引用了相当多的博客。尽量列出出处,如有遗漏,请多指正。 直接上第一篇: 出自 http://www.cnblogs.com/pinnasky/archive/2012/08/10...
  • zhshuai1
  • zhshuai1
  • 2015-08-07 00:48
  • 1492

dataTables的选项——特性及国际化语言

一.特性(功能) 1.jQueryUI:控制是否使用jquerui的样式(需要引入jqueryui的css) eg: "jQueryUI": "true",  //默认是false 2.autoWid...
  • gao_xu_520
  • gao_xu_520
  • 2017-11-23 10:44
  • 131

datatables 多条件搜索

最近开发项目用到了jquery datatable 这个插件,感觉还是很好用的,今天写了一个表格的完整功能,贴上来,以供参考,html,和后台部分的内容就不贴了,只贴js部分 /* ...
  • sdhzycsblz
  • sdhzycsblz
  • 2017-06-13 21:51
  • 1547

JQuery DataTables 服务端自定义查询(最新版本介绍)

JQuery DataTables 服务端自定义查询(最新实例讲解) JQuery DataTables 服务端多条件查询实现 JQuery DataTables Search API 介绍
  • shuai_wy
  • shuai_wy
  • 2017-11-02 19:59
  • 256

dataTable 自定义搜索条件

输入一组范围:                           &...
  • zxf1242652895
  • zxf1242652895
  • 2017-07-03 13:23
  • 1595

dataTables 用法荟萃

此文为本人所写,但是引用了相当多的博客。尽量列出出处,如有遗漏,请多指正。 直接上第一篇: 出自 http://www.cnblogs.com/pinnasky/archive/2012/08/10...
  • zhshuai1
  • zhshuai1
  • 2015-08-07 00:48
  • 1492

dataTable 改变搜索框位置

dataTable 改变搜索框位置
  • asdfgh1129
  • asdfgh1129
  • 2017-07-12 11:28
  • 1276

JQuery Datatables 控件的搜索框/显示分页的样式,有滚动条保持固定

使用了JQuery datatables的表格控件,但发现表格的列名太多了,会有滚动条,导致搜索框和显示的分页都随着滚动条一起右移了,这样不太人性化,所以需要重新设置这些插件的样式,参考如下内容: ...
  • omayyouhappy
  • omayyouhappy
  • 2016-10-25 17:14
  • 2857
    个人资料
    • 访问:79738次
    • 积分:1302
    • 等级:
    • 排名:千里之外
    • 原创:49篇
    • 转载:14篇
    • 译文:1篇
    • 评论:11条
    文章分类
    最新评论