jquery 플러그인 데이터 테이블 속성 소개 및 페이징 생성 및 정렬 예제에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-07-22 09:28:572052검색
DataTables는 jQuery 테이블 플러그인입니다. 이는 모든 HTML 양식에 대한 고급 대화형 컨트롤과 지원을 추가하는 점진적인 향상을 기반으로 하는 매우 유연한 도구입니다.
사용 방법:
먼저 다음 코드를 살펴보세요.
<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 파일을 추가합니다. 데모에서 복사할 수 있습니다. 경로 주소에 주의하세요.
그럼 다음 코드를 살펴보겠습니다.
<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": " 最后一页 "
}
}위 내용은 jquery 플러그인 데이터 테이블 속성 소개 및 페이징 생성 및 정렬 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.