jquery dataTables demo

最新推荐文章于 2024-04-17 10:06:43 发布

紫陌l纤尘

最新推荐文章于 2024-04-17 10:06:43 发布

阅读量2.5k

点赞数

分类专栏： JavaScript基础篇文章标签： jquery dataTables jqueryTable插件

本文链接：https://blog.csdn.net/u012877177/article/details/16981955

版权

JavaScript基础篇专栏收录该内容

16 篇文章 0 订阅

订阅专栏

相关下载请到jquery.dataTables官网：http://www.datatables.net/index

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page import="platform.commons.utils.ViewUtil"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>知识DEMO</title>
	<base href="<%=ViewUtil.getRequestPath(request)%>">
	<link rel="stylesheet" type="text/css" href="km/js/DataTables-1.9.4/media/css/demo_page.css">
	<link rel="stylesheet" type="text/css" href="km/js/DataTables-1.9.4/media/css/demo_table.css">
	<link rel="stylesheet" type="text/css" href="km/js/DataTables-1.9.4/media/css/demo_table_jui.css">
	<script type="text/javascript" src="km/js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="km/js/DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" charset="utf-8">  
		$(document).ready(function() {  
			var datatables = null;  
			var datatables = $('#example').dataTable( {  
				'bPaginate': true,    
				"bProcessing": true,  
				'bLengthChange': true,   
				'sPaginationType': 'full_numbers',  
 				"sAjaxSource": 'km/js/DataTables-1.9.4/examples/ajax/sources/arrays.txt',  
     			"oLanguage": {  
                                  "sProcessing": "正在加载数据...",  
                                  'sSearch': '数据筛选:',  
                                  "sLengthMenu": "每页显示 _MENU_ 项记录",  
                                  "sZeroRecords": "没有符合项件的数据...",  
                                  "sInfo": "当前数据为从第 _START_ 到第 _END_ 项数据；总共有 _TOTAL_ 项记录",  
                                  "sInfoEmpty": "显示 0 至 0 共 0 项",  
                                  "sInfoFiltered": "(_MAX_)"  
                             },   
           		"aoColumns":[  
                                   null, { "bSortable": false }, { "bSortable": false }, { "bSortable": false }, { "bSortable": false }  
                            ]   
             } );  
	     	function updateDataTable() {                      
				datatables.fnClearTable();  
				datatables.fnAddData([ ".1","2",".3","4","5"] );   
				datatables.fnAddData([ ".a","b",".c","d","e"] );   
	       	}  
	        $("#link").click(function(){  
	                   updateDataTable();  
	       	});
	        $('#example2').dataTable( { 
	        	"sAjaxSource": 'km/js/DataTables-1.9.4/examples/ajax/sources/arrays.txt', 
	        	"bAutoWidth": false, //自适应宽度
	            "aaSorting": [[1, "asc"]],
	            "sPaginationType": "full_numbers",
	            "oLanguage": {
	                   "sProcessing": "正在加载中......",
	                   "sLengthMenu": "每页显示 _MENU_ 条记录",
	                   "sZeroRecords": "对不起，查询不到相关数据！",
	                   "sEmptyTable": "表中无数据存在！",
	                   "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
	                   "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
	                   "sSearch": "搜索",
	                   "oPaginate": {
	                       "sFirst": "首页",
	                       "sPrevious": "上一页",
	                       "sNext": "下一页",
	                       "sLast": "末页"
	                   }
	             } //多语言配置
//              "bPaginate": true, //开关，是否显示分页器
//              "bInfo": true, //开关，是否显示表格的一些信息
//              "bFilter": true, //开关，是否启用客户端过滤器
//              "sDom": "<>lfrtip<>",
//              "bAutoWith": false,
//              "bDeferRender": false,
//              "bJQueryUI": false, //开关，是否启用JQueryUI风格
//              "bLengthChange": true, //开关，是否显示每页大小的下拉框
//              "bProcessing": true,
//              "bScrollInfinite": false,
//              "sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域大小,可设值：'disabled','2000px'
//              "bSort": true, //开关，是否启用各列具有按列排序的功能
//              "bSortClasses": true,
//              "bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，
//              打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的-  ------当值为true时aoColumnDefs不能隐藏列
//              "sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%'
//              "aaSorting": [[0, "asc"]],
//              "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列
//              "sDom": '<"H"if>t<"F"if>',
               
             } ); 
		} );  
	</script> 
</head>
<body id="dt_example">  
    <div id="container">  
	<h1><a href="#" id="link">知识列表</a></h1>  
	<div id="dynamic">  
	    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">  
	        <thead>  
	            <tr>  
	                <th width="20%">Rendering engine</th>  
	                <th width="25%">Browser</th>  
	                <th width="25%">Platform(s)</th>  
	                <th width="15%">Engine version</th>  
	                <th width="15%">CSS grade</th>  
	            </tr>  
	        </thead>  
	        <tbody>  
	              
	        </tbody>  
	        <tfoot>  
	            <tr>  
	                <th>Rendering engine</th>  
	                <th>Browser</th>  
	                <th>Platform(s)</th>  
	                <th>Engine version</th>  
	                <th>CSS grade</th>  
	            </tr>  
	        </tfoot>  
	    </table>  
	</div> 
	<h1><a href="#" id="link">资源列表</a></h1>  
	<div id="dynamic2">  
	    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example2">  
	        <thead>  
	            <tr>  
	                <th width="20%">Rendering engine</th>  
	                <th width="25%">Browser</th>  
	                <th width="25%">Platform(s)</th>  
	                <th width="15%">Engine version</th>  
	                <th width="15%">CSS grade</th>  
	            </tr>  
	        </thead>  
	        <tbody>  
	              
	        </tbody>  
	        <tfoot>  
	            <tr>  
	                <th>Rendering engine</th>  
	                <th>Browser</th>  
	                <th>Platform(s)</th>  
	                <th>Engine version</th>  
	                <th>CSS grade</th>  
	            </tr>  
	        </tfoot>  
	    </table>  
	</div>  
</body>
</html>

紫陌l纤尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery dataTables demo

相关下载请到jquery.dataTables官网：http://www.datatables.net/index 知识DEMO "> $(document).ready(function() { var datatables = null; var datatables = $('#example').dataTable( {
复制链接

扫一扫