jQuery datatables

jQuery datatables 属性,用例

参考:http://datatables.club/example/

http://blog.csdn.net/mickey_miki/article/details/8240477

http://www.cnblogs.com/pinnasky/archive/2012/08/10/2631917.html

 

html:

 

复制代码
<!-- 此例子是结合bootstrap的Datatables，暂且定位为最基本的例子吧 -->
<!-- 引入必须的css和js文件 -->
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> 
  <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css" /> 
  <script src="http://cdn.gbtags.com/datatables/1.10.5/js/jquery.js"></script> 
  <script src="http://cdn.gbtags.com/datatables/1.10.5/js/jquery.dataTables.min.js"></script> 
  <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script> 
  <!-- HTML代码片段中请勿添加<body>标签 //--> 
  <div id="container"> 
   <!-- 定义一个表格元素 --> 
   <button id="redraw">更换数据源</button> 
   <table id="example" class="table table-striped table-bordered"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>序号</th> 
      <th>标题</th> 
      <th>连接</th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
    <tfoot> 
     <tr> 
      <th></th> 
      <th>序号</th> 
      <th>标题</th> 
      <th>连接</th> 
     </tr> 
    </tfoot> 
    <!-- tbody是必须的 --> 
   </table> 
  </div>
复制代码

 

 

 

 

js:

复制代码
/*Javascript代码片段*/
var t = $('#example').DataTable({

    "bAutoWidth":true,// 是否自动计算列宽
    "bDeferRender":false,// 默认为false,是否延迟渲染
    "bFilter":true,// 是否对数据进行过滤
    "bInfo":true,// 页脚信息
    "bJQueryUI":false,// 是否开启jQuery UI ThemeRoller支持
    "bLengthChange":true,// ,是否允许终端用户从一个选择列表中选择分页的页数，页数为10，25，50和100，需要分页组件bPaginate的支持
    "bPaginate":true,// 是否开启分页功能
    "sPaginationType": "full_numbers",// 显示数字的翻页样式
    "aLengthMenu": [[10, 25, 50, -1], [2, 25, 50, "All"]],// 定义每页显示数据数量
    "bProcessing":true,// 默认为false,当表格在处理的时候（比如排序操作）是否显示“处理中...”
    "bScrollInfinite":false,// 默认为false,是否开启不限制长度的滚动条,（和sScrollY属性结合使用,bPaginate设置为false）
    "bServerSide":false,// 默认为false,配置DataTable使用服务器端处理
    "bSort":true,// 是否开启列排序
    "bSortClasses":false,// 是否开启排序列的class切换
    "bStateSave":true,// 默认为false,是否开启状态保存,cookie
    "iCookieDuration": 10*1*1, // 设置用来存储会话信息的cookie的持续时间，单位是秒
    "sScrollX":"100%",// 默认为空字符串，即：无效,是否开启水平滚动
    "sScrollY":"100%",// 默认为空字符串，即：无效,是否开启垂直滚动
    "oLanguage": {
        "sLengthMenu": "每页显示 _MENU_ 条记录",
        "sZeroRecords": "抱歉， 没有找到",
        "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
        "sInfoEmpty": "没有数据",
        "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
        "sInfoFiltered": " - filtering from _MAX_ records",
        "sInfoPostFix": ",使用该属性可以很方便的向表格信息字符串中添加额外的信息",
        "sLoadingRecords": "初始化...",
        "sProcessing": "处理中...",
        "sSearch": "搜索: _INPUT_ ",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "前一页",
            "sNext": "后一页",
            "sLast": "尾页"
          },
     },
     
     
     

    ajax: {
        //指定数据源
        url: "http://www.gbtags.com/gb/networks/uploads/a7bdea3c-feaf-4bb5-a3bd-f6184c19ec09/data.txt"
    },
    //每页显示三条数据
    pageLength: 3,
    columns: [{
        "data": null //此列不绑定数据源，用来显示序号
    },
    {
        "data": "id"
    },
    {
        "data": "title"
    },
    {
        "data": "url"
    }],
    "columnDefs": [{
        // "visible": false,
        //"targets": 0
    },
    {
        "render": function(data, type, row, meta) {
            //渲染 把数据源中的标题和url组成超链接
            return '<a href="' + data + '" target="_blank">' + row.title + '</a>';
        },
        //指定是第三列
        "targets": 2
    }]

});

//前台添加序号
t.on('order.dt search.dt',
function() {
    t.column(0, {
        "search": 'applied',
        "order": 'applied'
    }).nodes().each(function(cell, i) {
        cell.innerHTML = i + 1;
    });
}).draw();

//更换数据源（相同格式，但是数据内容不同）
$("#redraw").click(function() {
    var url = table.api().ajax.url("http://www.gbtags.com/gb/networks/uploads/a7bdea3c-feaf-4bb5-a3bd-f6184c19ec09/newData.txt");
    url.load();
});
复制代码

 

示例:

 

 

json

复制代码
{
    "data": [
        {
            "id": 1, 
            "url": "http://www.gbtags.com/gb/index.htm", 
            "title": "Online Program knowledge share and study platform"
        }, 
        {
            "id": 2, 
            "url": "http://www.gbtags.com/gb/listcodereplay.htm", 
            "title": "Share Code Gbtags"
        }, 
        {
            "id": 3, 
            "url": "http://www.gbtags.com/gb/gbliveclass.htm", 
            "title": "Online live Gbtags"
        }, 
        {
            "id": 4, 
            "url": "http://www.gbtags.com/gb/explore.htm", 
            "title": "Explorer Gbtags"
        }
    ]
}
复制代码

 

posted @   草木物语  阅读(532)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae