jquery的DataTable插件有熟悉的吗
发布网友
发布时间：2022-04-25 12:39
共3个回答
懂视网
时间：2022-04-23 07:25
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。
当前最新版为1.10.2，读者可点此本站下载。
其主要特点如下：
1.自动分页处理
2.即时表格数据过滤
3.数据排序以及数据类型自动检测
4.自动处理列宽度
5.可通过CSS定制样式
6.支持隐藏列
7.易用
8.可扩展性和灵活性
9.国际化
10.动态创建表格
11.免费的
使用方法：
首先看看如下代码：
<title>DataTables example</title> <style type="text/css" title="currentStyle"> @import "../../media/css/demo_page.css"; @import "../../media/css/demo_table.css"; @import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css"; </style> <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf-8">
上述代码中引入js和css文件。可以在demo里复制。注意路径地址。
接着来看看如下代码：
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "/SSS/dataTables/de_DE.txt"
},
"bStateSave": true,
//"bJQueryUI": true, //使用jqueryui 。我用的时候显示的不是很好
"sPaginationType": "full_numbers"//分页
} );
} );
</script>
</head>
<body id="dt_example">//此处为body的id
<p id="container" align="center">//*p 里是 table ，table包括thead等，最好按此格式写*
<h1>物品种类管理</h1>
<p id="demo">
<table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//id 别忘了
<thead>
<tr>
<th>物品编号</th>
<th>物品名称</th>
<th>物品单位</th>
<th>编辑状态</th>
<th>随便</th>
</tr>
</thead>
<tr class="gradeX">//此处可以是gradeA ,gradeX 等，但是gradeB 隔行换色 效果很好
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</p>
</p>上面就能创建出如图的效果， 分页。排序。等等。
最后讲讲 各各属性（主要添加的位置）
//$(document).ready(function() {
//$('#example').dataTable( {//加载
//"bPaginate": true,//分页按钮
//"bLengthChange": true,//每行显示记录数
//"bFilter": true,//搜索栏
//"bSort": true,//排序
//"bInfo": true,//Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
//"bAutoWidth": true } );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"aaSorting": [[ 4, "desc" ]]//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"aoColumns": [
// /* Engine */ null, //默认
// /* Browser */ null,
// /* Platform */ { "bSearchable": false, //不可参与搜索
// "bVisible": false },//不可见
// /* Version */ { "bVisible": false },//不可见
// /* Grade */ null
//] } );
//} );
//$(document).ready(function() {
//$('#example').dataTable({
//});
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"sDom": '<"top"i>rt<"bottom"flp<"clear">'//这段是自定义布局没搞明白挺复杂的。 * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - p elements* <"class" and > - p with a class * Examples: <"wrapper"flipt>, <lf<t>ip>
//} );
//} );
//$(document).ready(function() {
// $('#example').dataTable( {
// "bStateSave": true //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"sPaginationType": "full_numbers" //分页，一共两种样式 另一种为two_button 是datatables默认
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( { //分页信息 不是很难理解。
//"oLanguage": {
//"sLengthMenu": "Display _MENU_ records per page",
//"sZeroRecords": "Nothing found - sorry",
//"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
//"sInfoEmtpy": "Showing 0 to 0 of 0 records",
//"sInfoFiltered": "(filtered from _MAX_ total records)"
//}
//} );
//} )
$(document).ready(function() {
oTable = $('#example').dataTable({
"bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css
"sPaginationType": "full_numbers"
});
} );默认的语言是英文的 当然可以国际化：
"sUrl": "/SSS/dataTables/de_DE.txt" 添加个国际化的文件就可以。 名字随便 路径对了就可以。我写的国际化文件内容如下，可以直接复制到txt中使用.
{
"sProcessing": "Bitte warten...",
"sLengthMenu": "显示_MENU_条 ",
"sZeroRecords": "没有您要搜索的内容",
"sInfo": "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数 _MAX_ 条)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
JS相互转换XML和JSON的方法
JS实现JSON.stringify步骤详解
ajax和jsonp以及json区别使用步骤详解
热心网友
时间：2022-04-23 04:33
$oTable = $('#example').dataTable( {
"bProcessing": true,
"bAutoWidth": false,
"sAjaxSource": baseUrl+"infoManage/findByCondiInfo.do",
"bServerSide":true, //服务器端必须设置为true
"sAjaxDataProp":"msgJson.list",
"fnServerData": function (sSource, aoData, fnCallback ) {
aoData.push({"name": "cateId", "value": $(currentNode).attr("id")});
aoData.push({"name": "publishRuleId", "value": $("#publishRule").val()});
aoData.push({"name": "keywords", "value": $("#keywords").val()});
aoData.push({"name": "startDate", "value": $("#startDate").val()});
aoData.push({"name": "endDate", "value": $("#endDate").val()});
aoData.push({"name": "state", "value": $("#state").val()});
aoData.push({"name": "infoType", "value": $("#infoType").val()});
aoData.push({"name": "sourceType", "value": $("#sourceType").val()});
$.ajax( {
"dataType": 'json',
"type": "post",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"sDom": '<"tableTip">rt<bottom>lip',
"sPaginationType": "full_numbers",
"oLanguage": {
"sUrl":baseUrl+'js/common/111.txt'
},
"aaSorting": [[ 8, "desc" ]],
"aoColumns": [
{ "mDataProp": null,
"sWidth":"1%",
bSortable:false,
"fnRender": function(obj) {
var sReturn = '<img src = "'+baseUrl+'images/details_open.png" style = "vertical-align:middle;" title="点击展开详细信息" />';
return sReturn;
}
},
{ "mDataProp": null,
"sWidth":"1%",
bSortable:false,
"fnRender": function(obj) {
var sReturn = '<input type="checkbox" name = "checkRows"/>';
return sReturn;
}
},
{"mDataProp": null,
bSortable:false,
"sWidth":"5%"
},
{"mDataProp": "infoCateId",
"bSearchable": false,
"bVisible": false
},
{"mDataProp": "srcInfoId",
"bSearchable": false,
"bVisible": false
},
{"mDataProp": "title",
"sWidth":"23%",
bSortable:false,
"fnRender": function (oObj) {
var title = oObj.aData.title;
var infoCateId = oObj.aData.infoCateId;
var temp = escapeHtmlTag(title);
return '<a href="javascript:void(0);" onclick = "viewDetailInfo('+infoCateId+');return false;" title = "'+ temp.replace(
new RegExp('"', "g"), "'") +'">' + temp + '</a>';
}
},
{"mDataProp": "creator",
"bSearchable": false,
"bVisible": false
},
{"mDataProp": "creatorName",
"sWidth":"6%",
bSortable:false
},
{"mDataProp": "publishTime",
"sWidth":"11%"
},
{"mDataProp": function(source,type,val){
if(type === 'display' || type === 'filter'){
var str = "";
var type = source.state;
if(type == 0){
str = "未发布";
}else if(type == 1){
str = "已发布 ";
}else if(type == 2){
str = "重新编辑 ";
}
return str;
}
return source.state;
},
"sWidth":"6%",
bSortable:false
},
{"mDataProp": "publishRuleId",
"bSearchable": false,
"bVisible": false
}
],
"fnDrawCallback": function (oSettings) {
getRowIndex(oSettings, 2);
$(":checkbox").attr("checked",false);
}
});
~如果你认可我的回答，请及时点击【采纳为满意回答】按钮
~~手机提问的朋友在客户端右上角评价点【满意】即可。
~你的采纳是我前进的动力
~~O(∩_∩)O，记得好评和采纳，互相帮助，谢谢。
热心网友
时间：2022-04-23 05:51
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。
其主要特点如下：
1.自动分页处理
2.即时表格数据过滤
3.数据排序以及数据类型自动检测
4.自动处理列宽度
5.可通过CSS定制样式
6.支持隐藏列
7.易用
8.可扩展性和灵活性
9.国际化
10.动态创建表格
11.免费的
