前端入门（三）：datatables的rowDetails实例

最新推荐文章于 2020-08-03 17:38:28 发布
最新推荐文章于 2020-08-03 17:38:28 发布
阅读量634 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongyuguoai/article/details/80376824
版权

一、准备工作：

1. 新建一个dynamic web project，或者maven项目。

2. 在webcontent（或webapp）目录下面创建css文件夹和js文件夹，放置所需的依赖

3. 本项目下载地址https://github.com/dongyuguoai1/spingBootRestRM
二、代码编写

1. test.html

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Datatables</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../css/DT/jquery.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="../css/DTrowDetail/DTrowDetail.css">
</head>
<body>

<div class="container-fluid">
	<div class="alert-danger">
	<h2><b>Contoh Penggunaan Datatables</b></h2>
</div>
	<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/DT/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../js/DTrowDetail/DTrowDetail.js"></script>
</body>
</html>

2. DTrowDetail.js

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}
 
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "../data/data.json",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

3. data.json

{
  "data": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {
      "id": "3",
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009/01/12",
      "office": "San Francisco",
      "extn": "1562"
    },
    {
      "id": "4",
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "$433,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "id": "5",
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "$162,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "id": "6",
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "$372,000",
      "start_date": "2012/12/02",
      "office": "New York",
      "extn": "4804"
    },
    {
      "id": "7",
      "name": "Herrod Chandler",
      "position": "Sales Assistant",
      "salary": "$137,500",
      "start_date": "2012/08/06",
      "office": "San Francisco",
      "extn": "9608"
    },
    {
      "id": "8",
      "name": "Rhona Davidson",
      "position": "Integration Specialist",
      "salary": "$327,900",
      "start_date": "2010/10/14",
      "office": "Tokyo",
      "extn": "6200"
    },
    {
      "id": "9",
      "name": "Colleen Hurst",
      "position": "Javascript Developer",
      "salary": "$205,500",
      "start_date": "2009/09/15",
      "office": "San Francisco",
      "extn": "2360"
    },
    {
      "id": "10",
      "name": "Sonya Frost",
      "position": "Software Engineer",
      "salary": "$103,600",
      "start_date": "2008/12/13",
      "office": "Edinburgh",
      "extn": "1667"
    },
    {
      "id": "11",
      "name": "Jena Gaines",
      "position": "Office Manager",
      "salary": "$90,560",
      "start_date": "2008/12/19",
      "office": "London",
      "extn": "3814"
    },
    {
      "id": "12",
      "name": "Quinn Flynn",
      "position": "Support Lead",
      "salary": "$342,000",
      "start_date": "2013/03/03",
      "office": "Edinburgh",
      "extn": "9497"
    },
    {
      "id": "13",
      "name": "Charde Marshall",
      "position": "Regional Director",
      "salary": "$470,600",
      "start_date": "2008/10/16",
      "office": "San Francisco",
      "extn": "6741"
    },
    {
      "id": "14",
      "name": "Haley Kennedy",
      "position": "Senior Marketing Designer",
      "salary": "$313,500",
      "start_date": "2012/12/18",
      "office": "London",
      "extn": "3597"
    },
    {
      "id": "15",
      "name": "Tatyana Fitzpatrick",
      "position": "Regional Director",
      "salary": "$385,750",
      "start_date": "2010/03/17",
      "office": "London",
      "extn": "1965"
    },
    {
      "id": "16",
      "name": "Michael Silva",
      "position": "Marketing Designer",
      "salary": "$198,500",
      "start_date": "2012/11/27",
      "office": "London",
      "extn": "1581"
    },
    {
      "id": "17",
      "name": "Paul Byrd",
      "position": "Chief Financial Officer (CFO)",
      "salary": "$725,000",
      "start_date": "2010/06/09",
      "office": "New York",
      "extn": "3059"
    },
    {
      "id": "18",
      "name": "Gloria Little",
      "position": "Systems Administrator",
      "salary": "$237,500",
      "start_date": "2009/04/10",
      "office": "New York",
      "extn": "1721"
    },
    {
      "id": "19",
      "name": "Bradley Greer",
      "position": "Software Engineer",
      "salary": "$132,000",
      "start_date": "2012/10/13",
      "office": "London",
      "extn": "2558"
    },
    {
      "id": "20",
      "name": "Dai Rios",
      "position": "Personnel Lead",
      "salary": "$217,500",
      "start_date": "2012/09/26",
      "office": "Edinburgh",
      "extn": "2290"
    },
    {
      "id": "21",
      "name": "Jenette Caldwell",
      "position": "Development Lead",
      "salary": "$345,000",
      "start_date": "2011/09/03",
      "office": "New York",
      "extn": "1937"
    },
    {
      "id": "22",
      "name": "Yuri Berry",
      "position": "Chief Marketing Officer (CMO)",
      "salary": "$675,000",
      "start_date": "2009/06/25",
      "office": "New York",
      "extn": "6154"
    },
    {
      "id": "23",
      "name": "Caesar Vance",
      "position": "Pre-Sales Support",
      "salary": "$106,450",
      "start_date": "2011/12/12",
      "office": "New York",
      "extn": "8330"
    },
    {
      "id": "24",
      "name": "Doris Wilder",
      "position": "Sales Assistant",
      "salary": "$85,600",
      "start_date": "2010/09/20",
      "office": "Sidney",
      "extn": "3023"
    },
    {
      "id": "25",
      "name": "Angelica Ramos",
      "position": "Chief Executive Officer (CEO)",
      "salary": "$1,200,000",
      "start_date": "2009/10/09",
      "office": "London",
      "extn": "5797"
    },
    {
      "id": "26",
      "name": "Gavin Joyce",
      "position": "Developer",
      "salary": "$92,575",
      "start_date": "2010/12/22",
      "office": "Edinburgh",
      "extn": "8822"
    },
    {
      "id": "27",
      "name": "Jennifer Chang",
      "position": "Regional Director",
      "salary": "$357,650",
      "start_date": "2010/11/14",
      "office": "Singapore",
      "extn": "9239"
    },
    {
      "id": "28",
      "name": "Brenden Wagner",
      "position": "Software Engineer",
      "salary": "$206,850",
      "start_date": "2011/06/07",
      "office": "San Francisco",
      "extn": "1314"
    },
    {
      "id": "29",
      "name": "Fiona Green",
      "position": "Chief Operating Officer (COO)",
      "salary": "$850,000",
      "start_date": "2010/03/11",
      "office": "San Francisco",
      "extn": "2947"
    },
    {
      "id": "30",
      "name": "Shou Itou",
      "position": "Regional Marketing",
      "salary": "$163,000",
      "start_date": "2011/08/14",
      "office": "Tokyo",
      "extn": "8899"
    },
    {
      "id": "31",
      "name": "Michelle House",
      "position": "Integration Specialist",
      "salary": "$95,400",
      "start_date": "2011/06/02",
      "office": "Sidney",
      "extn": "2769"
    },
    {
      "id": "32",
      "name": "Suki Burks",
      "position": "Developer",
      "salary": "$114,500",
      "start_date": "2009/10/22",
      "office": "London",
      "extn": "6832"
    },
    {
      "id": "33",
      "name": "Prescott Bartlett",
      "position": "Technical Author",
      "salary": "$145,000",
      "start_date": "2011/05/07",
      "office": "London",
      "extn": "3606"
    },
    {
      "id": "34",
      "name": "Gavin Cortez",
      "position": "Team Leader",
      "salary": "$235,500",
      "start_date": "2008/10/26",
      "office": "San Francisco",
      "extn": "2860"
    },
    {
      "id": "35",
      "name": "Martena Mccray",
      "position": "Post-Sales support",
      "salary": "$324,050",
      "start_date": "2011/03/09",
      "office": "Edinburgh",
      "extn": "8240"
    },
    {
      "id": "36",
      "name": "Unity Butler",
      "position": "Marketing Designer",
      "salary": "$85,675",
      "start_date": "2009/12/09",
      "office": "San Francisco",
      "extn": "5384"
    },
    {
      "id": "37",
      "name": "Howard Hatfield",
      "position": "Office Manager",
      "salary": "$164,500",
      "start_date": "2008/12/16",
      "office": "San Francisco",
      "extn": "7031"
    },
    {
      "id": "38",
      "name": "Hope Fuentes",
      "position": "Secretary",
      "salary": "$109,850",
      "start_date": "2010/02/12",
      "office": "San Francisco",
      "extn": "6318"
    },
    {
      "id": "39",
      "name": "Vivian Harrell",
      "position": "Financial Controller",
      "salary": "$452,500",
      "start_date": "2009/02/14",
      "office": "San Francisco",
      "extn": "9422"
    },
    {
      "id": "40",
      "name": "Timothy Mooney",
      "position": "Office Manager",
      "salary": "$136,200",
      "start_date": "2008/12/11",
      "office": "London",
      "extn": "7580"
    },
    {
      "id": "41",
      "name": "Jackson Bradshaw",
      "position": "Director",
      "salary": "$645,750",
      "start_date": "2008/09/26",
      "office": "New York",
      "extn": "1042"
    },
    {
      "id": "42",
      "name": "Olivia Liang",
      "position": "Support Engineer",
      "salary": "$234,500",
      "start_date": "2011/02/03",
      "office": "Singapore",
      "extn": "2120"
    },
    {
      "id": "43",
      "name": "Bruno Nash",
      "position": "Software Engineer",
      "salary": "$163,500",
      "start_date": "2011/05/03",
      "office": "London",
      "extn": "6222"
    },
    {
      "id": "44",
      "name": "Sakura Yamamoto",
      "position": "Support Engineer",
      "salary": "$139,575",
      "start_date": "2009/08/19",
      "office": "Tokyo",
      "extn": "9383"
    },
    {
      "id": "45",
      "name": "Thor Walton",
      "position": "Developer",
      "salary": "$98,540",
      "start_date": "2013/08/11",
      "office": "New York",
      "extn": "8327"
    },
    {
      "id": "46",
      "name": "Finn Camacho",
      "position": "Support Engineer",
      "salary": "$87,500",
      "start_date": "2009/07/07",
      "office": "San Francisco",
      "extn": "2927"
    },
    {
      "id": "47",
      "name": "Serge Baldwin",
      "position": "Data Coordinator",
      "salary": "$138,575",
      "start_date": "2012/04/09",
      "office": "Singapore",
      "extn": "8352"
    },
    {
      "id": "48",
      "name": "Zenaida Frank",
      "position": "Software Engineer",
      "salary": "$125,250",
      "start_date": "2010/01/04",
      "office": "New York",
      "extn": "7439"
    },
    {
      "id": "49",
      "name": "Zorita Serrano",
      "position": "Software Engineer",
      "salary": "$115,000",
      "start_date": "2012/06/01",
      "office": "San Francisco",
      "extn": "4389"
    },
    {
      "id": "50",
      "name": "Jennifer Acosta",
      "position": "Junior Javascript Developer",
      "salary": "$75,650",
      "start_date": "2013/02/01",
      "office": "Edinburgh",
      "extn": "3431"
    },
    {
      "id": "51",
      "name": "Cara Stevens",
      "position": "Sales Assistant",
      "salary": "$145,600",
      "start_date": "2011/12/06",
      "office": "New York",
      "extn": "3990"
    },
    {
      "id": "52",
      "name": "Hermione Butler",
      "position": "Regional Director",
      "salary": "$356,250",
      "start_date": "2011/03/21",
      "office": "London",
      "extn": "1016"
    },
    {
      "id": "53",
      "name": "Lael Greer",
      "position": "Systems Administrator",
      "salary": "$103,500",
      "start_date": "2009/02/27",
      "office": "London",
      "extn": "6733"
    },
    {
      "id": "54",
      "name": "Jonas Alexander",
      "position": "Developer",
      "salary": "$86,500",
      "start_date": "2010/07/14",
      "office": "San Francisco",
      "extn": "8196"
    },
    {
      "id": "55",
      "name": "Shad Decker",
      "position": "Regional Director",
      "salary": "$183,000",
      "start_date": "2008/11/13",
      "office": "Edinburgh",
      "extn": "6373"
    },
    {
      "id": "56",
      "name": "Michael Bruce",
      "position": "Javascript Developer",
      "salary": "$183,000",
      "start_date": "2011/06/27",
      "office": "Singapore",
      "extn": "5384"
    },
    {
      "id": "57",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    }
  ]
}

 三、右键工程，run on server 或运行项目的执行程序（App.java->run as application），打开浏览器，查看结果

四、参考

[1]. https://datatables.net/examples/server_side/row_details.html （官网）

[2]. https://github.com/agik-setiawan/datatables-detail-row （github）

[3]. https://blog.csdn.net/zdx1515888659/article/details/41678129 （另外一版本）

五、问题解决

当详细信息很多时，放加减号图标的那一列可能会变长。可以考虑固定列宽：

https://jingyan.baidu.com/article/eae0782758ab871fec54852e.html

dongyuguoai
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
datatables所有例子
03-06
datatable基本例子都在这里，例子和官网的一一对应，如果访问本地ajax的.tex文件有跨域的话，请移步至我的chrome的ajax跨域问题解决博客
WPF中的DataGrid的RowDetail显示问题
muzizongheng的专栏
02-28 4809
背景：.net 4.0中的DataGrid如果我们把RowDetail的内容弄的很大， 超出当前屏幕可显示的范围。那么当我们DataGrid按行滚动时，拖到滚动条只能看到下一行，前一行的rowDetail看不见的部分并不会因为拖到滚动条就能看到。原因我们也说了， 因为我们按照行滚动而不是按照像素滚动。解决方案：如果要看到RowDetails，只能按照像素滚动。 但在.net 4.0上，一旦设置
JQuery DataTables hidden row details example
05-10 94
/* Formating function for row details */ function fnFormatDetails ( oTable, nTr ) { var aData = oTable.fnGetData( nTr ); var sOut =...
WPF DataGrid设置RowDetails时候主表和详细表列宽保持相同的一种实现方法
yulongguiziyao的专栏
10-16 1036
有时候使用datagrid的列表展示数据的时候 ，为了显示数据的历史变迁，可以在RowDetails中设置和主表列相同的一个DataGrid，但是为了美观的话，要让主表和详细表列保持相同宽度，并不能简单的使用绑定的方式实现，因为DataGrid中的类不在视觉书上，具体原因可以参考我的另一篇文章：WPF MVVM绑定DataGrid的列的显隐性解决方案。下面直接上代码： 首先要有一个类似代理的东西：...
WPF DataGrid 的RowDetailsTemplate的使用
dxm809的博客
04-03 3394
&lt;Window x:Class="DataGridExam.DataGridRowDetailsExam"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        T...
dandelion-datatables:DataTables的蒲公英组件
05-28
【标题】"dandelion-datatables: DataTables的蒲公英组件" 【正文】 DataTables是一款强大且功能丰富的JavaScript库，用于将HTML表格转化为交互式数据展示工具。它以其高度可定制性和丰富的功能集而闻名，包括排序...
dateSort:DataTables的日期排序器
05-23
2. **初始化DataTables**：设置DataTables实例时，通过`columnDefs`参数指定需要使用dateSort的列，并提供相应的日期格式。 3. **自定义格式**：如果标准格式无法满足需求，可以通过修改dateSort源码来支持新的日期...
DataTablesSrc:DataTables源存储库
04-28
jQuery的DataTables插件-源代码库 该git存储库包含DataTables的未构建源文件-DataTables增强了jQuery的插件。 如果您要使用DataTables而不是对其进行修改，请使用构建版本库中的构建文件： 。 在其中有关于如何使用...
datatables-cn:Datatables—— jquery 插件中文网
04-13
Datatables中文网 基于 jQuery 的表格插件，灵活，强大 | 1，如何使用？ <!--第一步：引入Javascript / CSS （CDN）--> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href=...
SearchPanes:DataTables的SearchPanes扩展
04-29
SearchPanes DataTables的SearchPanes扩展提供了改进的“搜索”功能，允许用户从“窗格”中选择选项，然后“窗格”将依次搜索DataTable并返回相关结果。 有多个配置选项可用于增强SearchPanes。安装SearchPanes扩展...
datatables使用ajax实例
05-31
datatables使用ajax的实例，下载文件，eclipse引入该项目即可运行，看到结果。
ssm整合datatables实例Demo
11-09
ssm整合datatables实例Demo,springMVC spring mybatis datatables
jquery datatables实例
12-18
jquery datatables前后台数据交互分页实例。
[简单]DataTables简单示例
08-07
NULL 博文链接：https://53873039oycg.iteye.com/blog/2101989
WPF 实现主从的datagrid以及操作rowdetailtemplate 的方法
技术驱动进步
01-17 8196
WPF 实现主从的datagrid以及操作rowdetailtemplate 的方法        最近在做一个项目，其中要用到主从表数据的折叠和隐藏，并且对从表中的数据能够获取和操作，虽然搞了好久，但最终被我推敲出来了，写出来分享一下，让朋友少走弯路，废话不说了，先上效果图： 下面是代码：   前台    "{Binding}"Name
wpf 设置rowdetail
Mark
03-02 1264
这个是在单击某一行的时候 显示row的详细资料  这个的先决的条件是:datagrid的RowDetailsVisibilityMode的值设置为Collapsed           DataGridRow row = (DataGridRow)dataGrid1.ItemContainerGenerator.ContainerFromIndex(this.dataGrid1.Sel
DataSet DataTable DataRow
zhoxier的专栏
08-07 1491
DataSet 表示数据在内存中的缓存。 属性 Tables  获取包含在 DataSet 中的表的集合。 ds.Tables["sjxx"] DataTable 表示内存中数据的一个表。 公共属性 Columns 获取属于该表的列的集合。 DataSet 获取此表所属的 DataSet。 DefaultView 获取可能包括筛选视图或游标位置的表的自定义视图。 Pr
JQuery DataTables的使用与综合实例
pan_junbiao的博客
08-03 2359
JQuery Datatables是一款JQuery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。功能包含：分页，即时搜索和排序、几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理、支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation、丰富多样的option和强大的API、支持国际化等。 1、JQuery DataTables示例代码 $(document).ready(function() {
DataTables editable代码实例
最新发布
07-24
以下是一个使用 DataTables 插件的可编辑表格的代码示例： HTML： ```html <th>Name <th>Position <th>Office <th>Age <td>Tiger Nixon <td>System Architect <td>Edinburgh <td>61 <td>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值