免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 1960 | 回复: 2
打印 上一主题 下一主题

[其他] 【mnesia】与 jquery dataTables [复制链接]

论坛徽章:
27
水瓶座
日期:2014-08-22 21:06:34程序设计版块每日发帖之星
日期:2015-11-25 06:20:0015-16赛季CBA联赛之新疆
日期:2015-12-19 19:05:48IT运维版块每日发帖之星
日期:2015-12-25 06:20:31IT运维版块每日发帖之星
日期:2015-12-25 06:20:31IT运维版块每日发帖之星
日期:2015-12-25 06:20:3315-16赛季CBA联赛之上海
日期:2016-04-15 19:51:31程序设计版块每日发帖之星
日期:2016-04-17 06:23:29程序设计版块每日发帖之星
日期:2016-04-23 06:20:00程序设计版块每日发帖之星
日期:2016-05-26 06:20:00每日论坛发贴之星
日期:2016-05-26 06:20:0015-16赛季CBA联赛之辽宁
日期:2017-02-16 23:59:47
跳转到指定楼层
1 [收藏(0)] [报告]
发表于 2015-03-23 21:09 |只看该作者 |倒序浏览
直接上代码
  1. web(_Env,[])->
  2.   [header(),
  3. "<HTML>
  4. <HEAD>

  5. <link href='/css/jquery.dataTables.css' rel='stylesheet' >
  6. <script type='text/javascript' src='/js/jquery.js'></script>
  7. <script type='text/javascript' src='/js/jquery.dataTables.js'></script>
  8. </HEAD>
  9. <BODY>\n",
  10.   "
  11. <script>
  12. $(document).ready(function(){
  13.   $('#console').dataTable( {
  14.     'processing': true,
  15.     'serverSide': false,
  16.     'ajax': '/cgi-bin/erl/web/get_data_from_db'
  17.   } );
  18. $('#console tfoot th').each( function () {
  19.         var title = $('#console tfoot th').eq( $(this).index() ).text();
  20.         $(this).html( '<input type=\"text\" placeholder=\"Search '+title+'\" />' );
  21.     } );

  22.     // DataTable
  23.     var table = $('#console').DataTable();

  24.     // Apply the search
  25.     table.columns().eq( 0 ).each( function ( colIdx ) {
  26.         $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
  27.             table
  28.                 .column( colIdx )
  29.                 .search( this.value )
  30.                 .draw();
  31.         } );
  32.     } );

  33. } );
  34. </script>
  35.   ",
  36.   % you need match the db column to the table column amount
  37.   "<table id='console' class='display' cellspacing='0' width='100%'><tr>
  38.   <thead><tr><th>NAME</th><th>IP</th><th>DATE</th></tr></thead>
  39.   <tfoot><tr><th>NAME</th><th>IP</th><th>DATE</th></tr></tfoot>
  40. <tbody>
  41. </table>",
  42.   footer()].
复制代码

论坛徽章:
27
水瓶座
日期:2014-08-22 21:06:34程序设计版块每日发帖之星
日期:2015-11-25 06:20:0015-16赛季CBA联赛之新疆
日期:2015-12-19 19:05:48IT运维版块每日发帖之星
日期:2015-12-25 06:20:31IT运维版块每日发帖之星
日期:2015-12-25 06:20:31IT运维版块每日发帖之星
日期:2015-12-25 06:20:3315-16赛季CBA联赛之上海
日期:2016-04-15 19:51:31程序设计版块每日发帖之星
日期:2016-04-17 06:23:29程序设计版块每日发帖之星
日期:2016-04-23 06:20:00程序设计版块每日发帖之星
日期:2016-05-26 06:20:00每日论坛发贴之星
日期:2016-05-26 06:20:0015-16赛季CBA联赛之辽宁
日期:2017-02-16 23:59:47
2 [报告]
发表于 2015-03-23 21:11 |只看该作者
这样就可以把数据里的东西用web的方式展现出来了。挺方便,可以在web上做sort,filter.

论坛徽章:
27
水瓶座
日期:2014-08-22 21:06:34程序设计版块每日发帖之星
日期:2015-11-25 06:20:0015-16赛季CBA联赛之新疆
日期:2015-12-19 19:05:48IT运维版块每日发帖之星
日期:2015-12-25 06:20:31IT运维版块每日发帖之星
日期:2015-12-25 06:20:31IT运维版块每日发帖之星
日期:2015-12-25 06:20:3315-16赛季CBA联赛之上海
日期:2016-04-15 19:51:31程序设计版块每日发帖之星
日期:2016-04-17 06:23:29程序设计版块每日发帖之星
日期:2016-04-23 06:20:00程序设计版块每日发帖之星
日期:2016-05-26 06:20:00每日论坛发贴之星
日期:2016-05-26 06:20:0015-16赛季CBA联赛之辽宁
日期:2017-02-16 23:59:47
3 [报告]
发表于 2015-03-23 21:13 |只看该作者
  1. http://www.datatables.net/
复制代码
你只要数据库里返因一个list给这个就可以了,'serverSide': false, 这里要调成false
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP