datatables自定义

最新推荐文章于 2024-08-14 13:02:48 发布

疯丫头666

最新推荐文章于 2024-08-14 13:02:48 发布

阅读量3.4k

点赞数 1

分类专栏： Javascript 文章标签： bootstrap jquery 搜索 datatables

本文链接：https://blog.csdn.net/wangli61289/article/details/78415300

版权

本文详细探讨了如何在Datatables中实现自定义样式和搜索功能。基于jQuery和Bootstrap，首先介绍了如何定制搜索框，然后讲解了自定义搜索的实现方法，最后讨论了Datatables的真正分页功能，需要使用时请确保已引入相关JS和CSS库。

摘要由CSDN通过智能技术生成

最近对datatables又做了一次深入的了解，这次主要datatables自定义样式及搜索框，废话不多说了，直接上代码。首先介绍下，代码是基于jquery、bootstrap，如果要直接使用代码，请先引入相关js、css。

第一部分：自定义搜索框

<div class="row" style="margin-top: 20px;">
	<div class="col-lg-6" style="padding-left: 18px;">
		<div class="input-group" style="width: 100%;margin:0 auto;">
			<input type="text" id="assets" class="form-control" placeholder="请输入关键字搜索">
			<span class="input-group-btn">
				<button class="btn btn-default" type="button" id="search_button" οnclick="doSearch();"><span class="glyphicon glyphicon-search"></span></button>
			</span>
		</div>
	</div>
</div>

第二部分：初始化datatables的配置

$.dataTablesSettings = {
      "bPaginate" : true,
      "bInfo": true,
      "bSort": false,
      "sPaginationType": "full_numbers",
      "iDisplayLength": 10,//每页显示的条数
      "bLengthChange": false,//是否可以动态调整每页的显示条数
      "bSearchable":false,
      "bFilter":false,
      "bProcessing": true,
      "bServerSide":true,
      "bAutoWidth": false,
      "oSearch":{ "sSearch": "", "bRegex": false, "bSmart": true },
      "oLanguage" : {
          "