JQueryDatatable实现⾃定义搜索
前段时间做东西⽤到了Datatable，⾃定义搜索那⾥搜索了好久才做出来。
写的很笨，不过终于实现了。
作为第⼀篇笔记写下来(^ _ ^)
实现效果
表格呈现现效果
实现筛选
HTML代码
<!doctype html>
<head>
<meta charset="utf-8">
<title>实现DataTable⾃定义搜索</title>
</head>
<!--第⼀步：引⼊Javascript / CSS （CDN）-->
<link rel="stylesheet" type="text/css" href="select-style.css">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="cdn.datatables/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="code.jquery/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="cdn.datatables/1.10.15/js/jquery.dataTables.js"></script>
<body>
<!--第⼆步：添加如下 HTML 代码-->
<div >
<!--下拉筛选框需要哪些加那些就可以-->
<div class="width-100">
<span class="select-type">地区：</span>
<select id="province_option" class="table-select"></select>
<span class="select-type">办学类型：</span>
<select id="internationalschool_type_option" class="table-select"></select>
<span class="search-css">搜索：</span>
<input id="schoolname_input" type="text" placeholder="学校名称/地区/类型" />
<!--筛选按钮
<button id="select_btn">点击筛选</button>
-->
</div>
<!--表格部分-->
<table id="table_id_example" >
<thead></thead>
<tbody></tbody>
</table>
</div>
<!--第三步：初始化Datatables-->
<script>
//指定列筛选功能的实现
$.search.push(
function(settings,data,index,RowData,counter){
province_data = data[2];
type_data = data[3];
type = $("#internationalschool_type_option option:selected").val();
pro = $("#province_option option:selected").val();
if((pro == '0' && type == '0')|| (province_data == pro && type == '0') || (pro == '0' && type_data == type) || (province_data == pro && type_data == type)) {return true;}
return false;
}
);
//表格初始化
$(document).ready( function () {
var table = $('#table_id_example').DataTable({
"dom": '<"toolbar">frtip',//把分页那⾥去除了但是还有另外的⽅法也能隐藏分页，待区分⽤法
"sDom":'"top"i',//利⽤sDom隐藏搜索栏，不会出现搜索禁⽤的情况 dom sDom⽤来修改各控件样式
"bFilter":false,//⼀般没有标注searching的时候，禁⽤会连searching⼀起禁⽤
"searching":true,//如果想要进⾏筛选，searching⼀定要启⽤，启⽤之后就不能禁⽤⾃带搜索框了
"bAutoWidth":false,
"aoColumnDefs": [{ "sWidth": "8%", "aTargets": [ 0,2,3 ] }],
/
/"fnPreDrawCallback": function( oSettings ) {
// $('.dataTables_filter input').attr({'name':'search','placeholder': '例：北京京西学校'});//提⽰
//},
ajax: {
url: 'isch_allrank.json',//本地json⽂件
dataSrc: 'China_International_School'
columns: [
{"sTitle":"排名",data:'rank'},
{"sTitle":"学校名称",data:'name'},//,searchable:false},
{"sTitle":"地区",data:'area'},
{"sTitle":"类型",data:'types'}
/
/前⾯的data是固定的表⽰你要获取数据中的什么属性，后⾯的是json数据的属性
//表头可以在最开始固定好，也可以在这⾥⽤"sTitle"固定
],
//"columnDefs": [ {
// "targets": 1,
// "searchable": false
//} ],//不知道为什么这样禁⽤搜索不起作⽤，在columns那⾥禁⽤就起作⽤
"language": {"sProcessing": "处理中...","sLengthMenu": "显⽰ _MENU_ 项结果","sZeroRecords": "没有匹配结果","sInfo": "","sInfoEmpty": "显⽰第 0 ⾄ 0 项结果，共 0 项","sInfoFiltered": "","sInfoPostFix": "","sSearch": "搜索:","sUrl": "","sEmptyTable": "表中数据为空","sLoadingRecords": "载⼊中...","sInfoThousan ds": ",","oPaginate": {"sFirst": "⾸页","sPrevious": "上页","sNext": "下页","sLast": "末页"},"oAria": {"sSortAscending": ": 以升序排列此列","sSortDescending": ": 以降序排列此列"}}//不想要就设置为空
});
jquery框架定义点击button进⾏筛选
//$('#select_btn').on('click',function() {
// table.draw();
//} );
//下拉框改变就进⾏筛选，PC端可以很好的执⾏，⼿机端不⾏
$('.table-select').on('click',function() {
table.draw();
} );
$('#schoolname_input').keyup( function() {
schoolname = $('#schoolname_input').val();
table.search( schoolname ).draw();
} );//将原有搜索框隐藏，将现有搜索框的⾥⾯的值传⼊隐藏的原有搜索框，实现搜索框⾃定义
} );
</script>
<!--下拉框选项js-->
<script type="text/javascript" charset="utf8" src="table-select.js"></script>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
.
width-100{width:100%;text-align: right;margin-bottom:1rem;margin-top: 1rem;}
.select-type{line-height: 30px;font-size: 0.9rem;color: #ccc;font-weight: bold;margin-left: 0.5rem;}
.search-css{line-height: 30px;font-size: 0.9rem;color:#ccc;font-weight: bold;margin-left: 0.5rem;}
select{height: 25px;border-radius:0.6rem;}
input{border-radius: 0.6rem;outline:none;border-top-style: groove;border-right-style: groove;border-bottom-style: groove;border-left-style: groove;border:1 px solid #a1a1a1;text-align: center;line-height:20px;}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论