www.whkt.net > jquEry DAtAtABlEs

jquEry DAtAtABlEs

jQuery datatables是一个很完善的表格工具,可以很轻松的绘制表格,添加各种样式,比如固定前几列、分页样式、搜索框等等,是一个很成熟的表格显示工具,关键是社区很活跃,有问题都可以找到答案.

在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我们完成任务 1、DataTables的默认配置 $(document).ready(function() {$('#example').dataTable();} );

在dom属性中的f就是filter的功能的选项,如果去掉f,也就是让模糊查询功能无效.$('#example').dataTable( { "dom": 'ip>'} );如果想准确查询的话,就必须自己动手做了

<script src="~/Scripts/jquery.dataTables.min.js"></script><script src="~/Scripts/jquery.js"></script>顺序换下试试:<script src="~/Scripts/jquery.js"></script><script src="~/Scripts/jquery.dataTables.min.js"></script>

先把它主页上写的特性翻译罗列如下:可变长度分页;动态过滤;多列排序,带数据类型检测功能;列宽度的智能处理;从多种数据源获取数据(DOM,js Array, ajax file, server-side returning);滚动配置属性;完整国际化支持;jquery UI

需要引入 jquery.dataTables.js 以及相关的css.创建表及添加删除数据:dataTables中的为其设置一个数据源,这个数据源可以是一个数组或者是一个对象.比较常见的方法还是使用ajax异步调用.添加删除数据主要根据具体情况,在回调函数中进行处理

<script type="text/javascript" src="../../Scripts/jquery.js"></script> <script type="text/javascript" src="../../Scripts/jquery.dataTables.min.js"></script> <link rel="Stylesheet" type="text/css" href="../../common/jquery.dataTables.min.css

每页多少条是由自己定义的.具体定义代码如下:$(document).ready(function() {$('#example').dataTable( {"aLengthMenu": [[10, 25, 50, -1], ["10条", "25条", "50条", "All"]];//二组数组,第一组数量,第二组说明文字;"

dataTables是一种很好用前端表格显示库.当加载大量数据时,可以用Ajax 获取数据来提高效率,增速网页加载速率.下面以一个例子作示范.首先,需要下载jquery以及dataTables库.这里使用的是版本是jQuery v1.11.3和DataTables 1.10.9.

$oTable = $('#example').dataTable( { "bProcessing": true, "bAutoWidth": false, "sAjaxSource": baseUrl+"infoManage/findByCondiInfo.do", "bServerSide":true, //服务器端必须设置为true"sAjaxDataProp":"msgJson.list","

相关搜索:

网站地图

All rights reserved Powered by www.whkt.net

copyright ©right 2010-2021。
www.whkt.net内容来自网络,如有侵犯请联系客服。zhit325@qq.com