jquery datatables 1.10.9 搜索

最新推荐文章于 2021-04-02 18:16:39 发布

早上的阳光

最新推荐文章于 2021-04-02 18:16:39 发布

阅读量831

点赞数

分类专栏： java 文章标签： jquery datatble

本文链接：https://blog.csdn.net/u010011737/article/details/51543870

版权

java 专栏收录该内容

15 篇文章 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"  οnclick="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" οnclick="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"   οnclick="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();
	});