Jquery　Data Table插件

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>肿瘤联盟科研平台</title>

<!-- For all browsers -->

<link rel="stylesheet" href="css/reset.css?v=1">

<link rel="stylesheet" href="css/style.css?v=1">

<link rel="stylesheet" href="css/colors.css?v=1">

<link rel="stylesheet" media="print" href="css/print.css?v=1">

<!-- For progressively larger displays -->

<link rel="stylesheet" media="only all and (min-width: 480px)" href="css/480.css?v=1">

<link rel="stylesheet" media="only all and (min-width: 768px)" href="css/768.css?v=1">

<link rel="stylesheet" media="only all and (min-width: 992px)" href="css/992.css?v=1">

<link rel="stylesheet" media="only all and (min-width: 1200px)" href="css/1200.css?v=1">

<!-- For Retina displays -->

<link rel="stylesheet" media="only all and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5)" href="css/2x.css?v=1">

<!-- Additional styles -->

<link rel="stylesheet" href="css/styles/form.css?v=1">

<link rel="stylesheet" href="css/styles/switches.css?v=1">

<link rel="stylesheet" href="css/styles/table.css?v=1">

<link rel="stylesheet" href="css/styles/new.css">

<link rel="stylesheet" href="css/pikaday.css">

<!-- DataTables -->

<link rel="stylesheet" href="js/libs/DataTables/jquery.dataTables.css?v=1">

<!-- JavaScript at bottom except for Modernizr -->

<script src="js/libs/modernizr.custom.js"></script>

<script src="resource/js/jquery-1.10.2.min.js"></script>

<script src="resource/js/jquery.dataTables.min.js"></script>

<script src="js/setup.js"></script>

<script src="js/developr.input.js"></script>

<script src="js/developr.navigable.js"></script>

<script src="js/developr.notify.js"></script>

<script src="js/developr.scroll.js"></script>

<script src="js/developr.tooltip.js"></script>

<script src="js/developr.table.js"></script> 

<link rel="stylesheet" href="css/jquery.dataTables.css">

<link rel="stylesheet" href="css/jquery.dataTables.default.css">

<link rel="stylesheet" href="css/jquery.dataTables-simple.css">

<link rel="stylesheet" href="css/table.css">

<script type="text/javascript">

function dada()

{

    alert("点击事件！");

}

var dataSet = [

    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],

    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],

    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],

    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],

    [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "<a class=\"button compact icon-pencil edit\">ssd</a>"],

    [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],

    [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],

    [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],

    [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],

    [ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],

    [ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],

    [ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],

    [ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],

    [ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],

    [ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],

    [ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],

    [ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ]

];

function dodatatable1(){

    // Table sort - DataTables

    var table = $('#memberTable');

    table.dataTable( {

         data: dataSet,

         'bSort':false,

            'bAutoWidth':false,

            dom: 'Bfrtip',

            'sPaginationType': 'full_numbers',

            'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',

            'fnInitComplete': function( oSettings )

            {

                // Style length select

                table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();

                tableStyled = true;

                //$(".dataTables_length").append('<span class="blue-gradient glossy ssx " data-toggle="modal" data-target="#myModal">添加</span>');

                $('#memberTable').siblings('.dataTables_header').children('.dataTables_length').append('<span class="blue-gradient glossy ssx " data-toggle="modal" data-target="#myModal" onclick="dada()">添加</span>');

            },

         "bRetrieve": true,

         'oLanguage':{

                'sSearch':'搜索',

                'sLengthMenu':'每页显示 _MENU_ 条记录',

                'sZeroRecords':'抱歉，没有检索到数据',

                'sInfo':'从_START_到_END_ / 共_TOTAL_条数据',

                'sInfoEmpty':'没有数据',

                'sInforFiltered':'(从_MAX_条数据中检索)',

                'oPaginate':{

                    'sFirst':'首页',

                    'sPrevious':'前一页',

                    'sNext':'下一页',

                    'sLast':'尾页'

                }

      },

      buttons: [

            'colvis',

            'excel',

            'print'

        ],

     columns: [

        { title: "姓名"},

        { title: "性别" },

        { title: "职务/职称" },

        { title: "学历" },

        { title: "在项目中承担的任务" },

        { title: "所在单位" }

     ]

    ,

    } );

};

</script>

</head>

<body>

<input  type="button"  name='1111'  value='ShowTable' onclick="dodatatable1()"/>

<table id="memberTable" class="table responsive-table">

</table>

</body>

</html>

效果图如下

Jquery　Data Table插件的更多相关文章

基于jquery的json转table插件jsontotable
分享一款基于jquery的json转table插件jsontotable.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="container ...
jQuery Pagination分页插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery动态表格插件 AppendGrid
AppendGrid是一个jQuery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许用户在表格里增加/删除/插入/删除行,控制input/select/textarea 提交 ...
jQuery Pagination分页插件--无刷新
源码:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx 代 ...
几款jQuery右键菜单插件介绍
在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...
C#结合Jquery LigerUI Tree插件构造树
Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的构建树形菜单.呵呵废话不说了,直入正题,下面介绍C#结合ligerui 构造树形菜单的两种方法 1 ...
【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)
参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...
基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
20款美化网站的 jQuery Lightbox 灯箱插件
jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...

随机推荐

B. Factory Repairs--cf627B(线段树)
http://codeforces.com/problemset/problem/627/B 题目大意: n代表天数 ,k代表每一次维修持续的天数,a代表维修过后每天能生产a件产品,b代表维修之前每 ...
Kafka在Centos6.4中的集群搭建
环境要求:三台装有Centos6.4的虚拟机,需要有java1.7以上的环境,需要ZooKeeper环境. 1)从Kafka官网下载Kafka安装包下载Kafka 2)解压安装包 tar -xzf ...
java设计模式之外观模式（门面模式）
针对外观模式,在项目开发和实际运用中十分频繁,但是其极易理解,下面就简要介绍一下. 一.概念介绍外观模式(Facade),他隐藏了系统的复杂性,并向客户端提供了一个可以访问系统的接口.这种类型的设计 ...
web可用性测试
1.软件质量模型 2.什么是可用性测试 a. 用户体验 Google搜索界面 ipod iphone b.使用感受清爽 ,美观,简洁 3. 一位局长使用B/S系统今天我点名买了个B/S ...
nodejs:使用多处理器
nodejs是单线程,这意味着Node只能利用一个处理器来工作.但多数服务器都有多个核.好在nodejs提供了cluster模块,可以把任务分配给子进程.每个子进程有些特殊能力,比如能与其他子进程共享 ...
Hive安装与部署集成mysql
前提条件: 1.一台配置好hadoop环境的虚拟机.hadoop环境搭建教程:稍后补充 2.存在hadoop账户.不存在的可以新建hadoop账户安装配置hadoop. 安装教程: 一.Mysql安装 ...
热烈庆祝杨学明老师为苏宁、中兴、烽火、CNNIC、创维、金立、中航信等知名企业提供培训和咨询服务！
在2015年三季度,研发资深顾问.资深讲师杨学明先生为国内多家名企提供了培训和咨询服务!由于杨学明老师在软件及互联网方面的管理经验极为丰富,被多家公司选为首席研发讲师!并聘为常年顾问!
今天在Mac机器上使用了Flex Builder编辑了一个源代码文件，保存后使用vim命令去打开时发现系统自动在每一行的结尾添加了^M符号，其实^M在Linux/Unix中是非常常见的，也就是我们在Win中见过的/r回车符号。由于编辑软件的编码问题，某些IDE的编辑器在编辑完文件之后会自动加上这个^M符号。看起来对我们的源代码没有任何影响，其实并不然，当我们把源代码文件Check In到svn之类
今天在Mac机器上使用了Flex Builder编辑了一个源代码文件,保存后使用vim命令去打开时发现系统自动在每一行的结尾添加了^M符号,其实^M在Linux/Unix中是非常常见的,也就是我们在W ...
Robberies(HDU2955)：01背包+概率转换问题（思维转换）
Robberies HDU2955 因为题目涉及求浮点数的计算:则不能从正面使用01背包求解... 为了能够使用01背包!从唯一的整数(抢到的钱下手)... 之后就是概率的问题: 题目只是给出被抓的 ...
SPOJ ONEZERO(搜索)
搜索的好题,,,, 摘自题解: 题意: 给一个数n,求n 的最小的倍数,满足它的10进制表示中每一位不是0就是1. 思路: 用f(x)表示被n整除取模后的最小数,那么从0开始,每次往后添0或者1,如 ...

Jquery Data Table插件

Jquery Data Table插件的更多相关文章

随机推荐

热门专题

Jquery　Data Table插件

Jquery　Data Table插件的更多相关文章