datatable 基本内容的 升级版 布局

最新推荐文章于 2022-12-28 18:00:00 发布
最新推荐文章于 2022-12-28 18:00:00 发布
阅读量299 收藏
点赞数 1
分类专栏： 前端 文章标签： datatable
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YKenan/article/details/90114534
版权

datatable 基本内容的 升级版 布局

此文件会随着时间不断更新

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="keywords" content="YKenan, list" />
		<title>YKenan-list</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/dataTable.min.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css" />
		<link rel="stylesheet" type="text/css" href="css/buttons.bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap4.min.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/buttons.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>

		<%@ include file="html/header.html" %>

		<div class="container">

			<div class="list_bg_body">

				<table class="table datatable display table-bordered table-hover" id="myTable">
					<thead>
						<tr></tr>
					</thead>
					<tbody>
						<tr></tr>
					</tbody>
				</table>
				
			</div>

		</div>
		<input type="hidden" value="${list_url}" />
		<%@ include file="html/footer.html" %>

		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="js/dataTables.buttons.min.js"></script>
		<script type="text/javascript" src="js/dataTables.min.js"></script>
		<script type="text/javascript" src="js/dataTables.bootstrap4.min.js"></script>
		<script type="text/javascript" src="js/jszip.min.js"></script>
		<script type="text/javascript" src="js/pdfmake.min.js"></script>
		<script type="text/javascript" src="js/vfs_fonts.js"></script>
		<script type="text/javascript" src="js/buttons.flash.min.js"></script>
		<script type="text/javascript" src="js/buttons.print.min.js"></script>
		<script type="text/javascript" src="js/buttons.html5.min.js"></script>
		<script type="text/javascript" src="js/style.js"></script>
		<script type="text/javascript" src="js/example.js"></script>

		<script type="text/javascript">
			$(document).ready(function() {
				var table = $('#myTable').DataTable({
					"ajax": {
						"url": $("input[type='hidden']").val(),
						"type": "GET",
						"dataType": "json",
			            "dataSrc": ""
					},
					"destroy": "true",
					//使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
					//data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
					"columns": [{
							"title": "YKenan1",
							"data": 'yKenan1',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan2",
							"data": 'yKenan2',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan3",
							"data": 'yKenan3',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan4",
							"data": 'yKenan4',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan5",
							"data": 'yKenan5',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan6",
							"data": 'yKenan6',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan7",
							"data": 'yKenan7',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan8",
							"data": 'yKenan8',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan9",
							"data": 'yKenan9',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan10",
							"data": 'yKenan10',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan11",
							"data": 'yKenan11',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan12",
							"data": 'yKenan12',
							"width": "100",
							"sClass": "text-center"
						},
						{
							"title": "YKenan13",
							"data": 'yKenan13',
							"width": "100",
							"sClass": "text-center"
						}
					],
					"columnDefs": [{
		                    "render": function(data, type, row, meta){
		                    	var html =
		                            '<a href="detail">' + row.YKenan1 + '</a>';
		                        return html;
		                    },
		                    "targets": 0
		                }
		            ],
					"dom": 'Bfrtip',
					"buttons": ['copy', 'excel', 'pdf', 'csv', 'print'],
					"scrollX": "400"
				});
				//给行绑定选中事件
				$('#myTable tbody').on('click', 'tr', function() {
					if($(this).hasClass('selected')) {
						$(this).removeClass('selected');
					} else {
						table.$('tr.selected').removeClass('selected');
						$(this).addClass('selected');
					}
				});
			});
		</script>

	</body>

</html>
YKenan
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nested-datatables：jQuery DataTables插件，用于在行中呈现嵌套的DataTables。 内部表独立于外部表的数据和布局
02-04
嵌套数据表 jQuery DataTables插件，用于在行中呈现嵌套的DataTables。 内部表独立于外部表的数据和布局。 安装 下载并包含文件 NPM $ npm install nested-datatables 用法 var table = new nestedTables . TableHierarchy ( 'example' , data , settings ) ; table . initializeTableHierarchy ( ) ; 方法 TableHierarchy（wrapperID，数据，设置） 主要的NestedTables构造函数。 wrapperI
Jquery DataTables自学笔记 之 自定义布局
陈国中的专栏
12-05 1783
$(document).ready(function() {     $('#example').dataTable({     "sDom": '>rt>'     }); });   //自定义布局 //*  l - Length changing * f - Filtering input* t - The table!* i - Info
datatables 自定义布局
wenldJAVA的专栏
06-09 1186
$(document).ready(function() {       $('#example').dataTable({       "sDom":'>rt>'       });   });       //自定义布局    //*  l - Length changing * f - Filtering input* t - The table!*
DataTables-table的布局sDom
ykp的专栏
07-23 5493
DataTables关于table的布局主要是根据sDom标签来定以的："sDom":'<"top"lf<"clear">>rt<"bottom"ip<"clear">>',//自定义布局sdom：l- 每行显示的记录数;f- 搜索框;t- 表格;i- 表格信息;p- 分页条;r- 加载时的进度条<”top”lf<”clear”>>：是table上边的显示信息控制，主要显示：l- 每行显示的记录数；f
datatables插件让其组件自定义排列，适应各种页面布局
weixin_30608131的博客
03-13 179
如何自定义布局，让分页组件，页码筛选长度的下拉框，以及表格信息位置自定义 这个依赖的是sDom属性，这个有点不容易懂，它有自己的一个编码方式，最后会转换成html代码。 未做任何修改时，datatables插件默认显示方式为 但是项目中经常会遇到各种各样的布局，所以需要sDom属性来设置页面，修改各组件的显示位置。可参考：http://www.datatables.club/r...
DataTable 插件v2.2.rar
08-30
7. **DOM布局**：DataTable的DOM布局控制了其元素在页面上的位置，例如`"lfrtip"`表示从左到右依次是长度选择、搜索框、分页。 8. **事件处理**：如`drawCallback`会在表格渲染完成后触发，可用于进一步的自定义...
Microsoft .NET Framework 2.0 简体中文版
09-13
在.NET Framework 2.0中，编译器进行了升级，支持更多高级语言特性，如匿名方法、迭代器、部分类型等。同时，Visual Studio 2005与.NET Framework 2.0紧密结合，提供了更加强大的调试工具，如断点、数据监视、内存...
TreeGrid树形表格控件可用版
09-22
在给定的"TreeGrid树形表格控件可用版"中，描述提到用户遇到了在Visual Studio 2010（VS2010）下无法编译和运行的问题。这可能是因为该控件可能原生支持的是更高版本的.NET Framework或特定的开发环境。经过调试，...
双鱼林C#基于winform代码生成器2.0版.zip
最新发布
03-17
这款2.0版本在原有基础上进行了优化与升级，旨在提供更加稳定、高效的代码生成服务。 在Windows Forms开发中，用户界面(UI)的构建往往需要大量手动编写代码，而这款代码生成器能够自动生成这些基础代码，包括控件的...
ASP.NET数据库网站设计教程（C#版）[孙士保]第8章 使用数据源控件访问数据库.ppt
06-02
- **GridView**：表格视图，支持编辑、删除、排序、分页，是DataGrid的升级版。 - **ListView**：高度自定义的数据呈现，支持编辑、插入、删除和分页，替代了Repeater和DataList。 - **Menu**：创建分层动态菜单...
jquery.dataTable.js 使用详解 二、sDom布局源码解析
08-09
NULL 博文链接：https://rhodian.iteye.com/blog/2193928
Datatables——表格插件
Qjy_985211的博客
12-25 506
线上地址 CSS ：http://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css JS ：http://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js 本地使用 本地引入两个文件后，在 <script> </script> 标签中初始化一下就可以直接使用了。 <script type="text/javascript"> .
dataTables中文排序以及中英文混排乱序问题解决
weixin_34124651的博客
12-15 430
2019独角兽企业重金招聘Python工程师标准>>> ...
显示datatable内容
zbguolei的专栏
10-08 243
for (int i = 0; i < dt.Rows.Count; i++) { for (int j = 0; j < dt.Columns.Count; j++) { Response.Write(dt.Rows[i][j].ToString()+","); } Response.Write("<br&g.
关于jquery datatable 设置垂直滚动条 表头布局异常的问题
C_hydar的博客
04-15 2273
datatable 设置滚动条后表头布局异常问题
Datatables样式
夜飞鼠的专栏
12-28 2098
dataTables.bootstrap.min.js脚本以及相应的bootstrap.min.css、dataTables.bootstrap.min.css样式。，DataTables的Bootstrap集成还为DataTables中的分页控件提供了一个渲染器，以确保表的分页也由Bootstrap统一样式。此示例显示指定了order列类的DataTables，每一列的行数据都按照字符顺序排序。此示例指定了stripe类的DataTables，行使用不同的颜色交替显示。
使用jqueryDatatable的sDom属性自定义布局
chenshi6782的博客
11-27 801
$(document).ready(function() { $('#example').dataTable({ "sDom":'<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>' ...
datatable的使用
lgxzzz的博客
08-26 1204
1:导入包： URL：http://www.datatables.net/ 分别导入css和js文件 Html代码 <styletype="text/css"title="currentStyle"> @import"css/demo_page.css"; @import"css/demo_table.css"; @import"css/demo_table_jui.css"; </style> ...
vb读取datatable内容
06-02
要读取DataTable的内容，可以使用DataTable.Rows属性访问DataTable中的所有行，然后使用DataRow.Item属性访问每一列的值。以下是示例代码： ```vb Dim dataTable As New DataTable() ' 填充dataTable的代码 For ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值