【mnesia】与 jquery dataTables

shijiang1130 发表于 2015-03-23 21:09

直接上代码web(_Env,[])->
[header(),
"<HTML>
<HEAD>

<link href='/css/jquery.dataTables.css' rel='stylesheet' >
<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery.dataTables.js'></script>
</HEAD>
<BODY>\n",
"
<script>
$(document).ready(function(){
$('#console').dataTable( {
'processing': true,
'serverSide': false,
'ajax': '/cgi-bin/erl/web/get_data_from_db'
} );
$('#console tfoot th').each( function () {
   var title = $('#console tfoot th').eq( $(this).index() ).text();
   $(this).html( '<input type=\"text\" placeholder=\"Search '+title+'\" />' );
} );

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

// Apply the search
table.columns().eq( 0 ).each( function ( colIdx ) {
   $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
         table
            .column( colIdx )
            .search( this.value )
            .draw();
   } );
} );

} );
</script>
",
% you need match the db column to the table column amount
"<table id='console' class='display' cellspacing='0' width='100%'><tr>
<thead><tr><th>NAME</th><th>IP</th><th>DATE</th></tr></thead>
<tfoot><tr><th>NAME</th><th>IP</th><th>DATE</th></tr></tfoot>
<tbody>
</table>",
footer()].

shijiang1130 发表于 2015-03-23 21:11

这样就可以把数据里的东西用web的方式展现出来了。挺方便，可以在web上做sort,filter.

shijiang1130 发表于 2015-03-23 21:13

http://www.datatables.net/你只要数据库里返因一个list给这个就可以了，'serverSide': false, 这里要调成false

页: [1]

Chinaunix's Archiver

【mnesia】与 jquery dataTables