datatables 使用心得

来源：互联网发布：mac 上面菜单栏隐藏编辑：程序博客网时间：2024/06/06 18:25

由于需要用到展开显示详情这个功能，在尝试了div的层显示和隐藏的各种失败后，遇上了datatables，下面就讲讲我此次使用此控件的些许心得吧，也为自己做做技术总结啥的

首先上上效果图：

html代码：

<div id="table" class="mt10">            <div class="box span10 oh">                <table id ="example" width="100%" border="0" cellpadding="0" cellspacing="0" class="list_table" >                    <thead>                    <tr>                        <th width="20" nowrap="nowrap"><input type="checkbox"  onclick="selectedAll()" id="ch1">全选</th>                        <th width="30" nowrap="nowrap">部品名称</th>                        <th width="30" nowrap="nowrap">部品制番</th>                        <th width="30" nowrap="nowrap">部品管理号</th>                        <th width="30" nowrap="nowrap">修理者</th>                        <th width="30" nowrap="nowrap">受付日期</th>                        <th width="30" nowrap="nowrap">处置结果</th>                        <th width="30" nowrap="nowrap">操作</th>                        <th width="30" nowrap="nowrap">显示部品详情</th>                    </tr>                    </thead>                     <tfoot></tfoot>                </table>              </div>        </div>

其中thead部分就是表头也就是第一行中带有稍许阴影显示的部分内容，这个可以由自己随意编写，相信大家这个不需要我赘述了，(*^__^*) 嘻嘻……

js代码：

        $(document).ready(function() {            var pro_name = document.getElementById('pro_name').value;            var pro_no = document.getElementById('pro_no').value;            var manager_no = document.getElementById('manager_no').value;            var repair_man = document.getElementById('repair_man').value;            var accept_time = document.getElementById('accept_time').value;            var disposal_result = document.getElementById('disposal_result').value;            var dt = $('#example').DataTable( {                "bPaginate": true,    <span style="white-space:pre"></span>//是否显示分页功能"serverSide": false,    <span style="font-family: Arial, Helvetica, sans-serif;">//<span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;">指定从服务器端获取数据,如果将此参数设置为true时，分页将不会显示</span></span>                "bSort": false,   //排序功能                "iDisplayLength": 10,//每页显示的数据行数                "sPaginationType": "full_numbers",//分页的格式，其中有两种格式，一种是只显示上下页的，含有一种就是我这样的显示数字和上下页的                "ajax": {                        "url": "__URL__/GetAcceptanceProductInfo",                        "type": "POST",                        "data":{"pro_name":pro_name,"pro_no":pro_no,"manager_no":manager_no,"repair_man":repair_man,"accept_time":accept_time,"disposal_re<span style="white-space:pre"></span>sult":disposal_result},                    },//ajax请求数据的路径和往后台传递的参数"columns": [                        {"sWidth": "10px", "data": "id","mRender": function(data, type, full) {                                return '<input type="checkbox"  id = "ids" name="ids" value="' + data + '" >';                            }                        },//此处显示的是表格数据中第一列的值，依次往后推，下面也就是第二列，第三列。。。的值{ "data": "pro_name" },{ "data": "pro_no" },{ "data": "manager_no" },                        { "data": "repair_man" },                        { "data": "accept_time" },                        { "data": "disposal_result"},                        {"sWidth": "30px", "data": "id", "mRender": function(data, type, full) {                                return '<a href ="__URL__/DeleteAcceptanceProductData/id/'+data+'/flag/DeleteAcceptanceProductInfo"  class="ext_btn" onclick="return delSingle();"><span class="add"></span>删除</a>';                            }                        },                        {                            "className":      'details-control',                            "orderable":      false,                            "data":           null,                            "defaultContent": '',                            },            ],  //此处为表格数据结束的位置            "oLanguage": {                          //汉化                   "sLengthMenu": "每页显示 _MENU_ 条记录",                   "sZeroRecords": "没有检索到数据",                   "sInfo": "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，总共有 _TOTAL_ 条记录",                   "sInfoEmtpy": "没有数据",                   "sProcessing": "正在加载数据...",                   "oPaginate": {                       "sFirst": "",                       "sPrevious": "上一页",                       "sNext": "下一页",                       "sLast": ""                  }               }   //此处为分页的格式 } ); // 点击显示部品详情中的+号图标，显示详情的内容var detailRows = [];$('#example tbody').on( 'click', 'tr td.details-control', function () {            var tr = $(this).closest('tr');            var row = dt.row( tr );            var idx = $.inArray( tr.attr('id'), detailRows );            if ( row.child.isShown() ) {                    tr.removeClass( 'details' );                    row.child.hide();                    // Remove from the 'open' array                    detailRows.splice( idx, 1 );            }            else {                    tr.addClass( 'details' );                    row.child( format( row.data() ) ).show();                    // Add to the 'open' array                    if ( idx === -1 ) {                            detailRows.push( tr.attr('id') );                    }            }} );// On each draw, loop over the `detailRows` array and show any child rowsdt.on( 'draw', function () {            $.each( detailRows, function ( i, id ) {                $('#'+id+' td.details-control').trigger( 'click' );            } );} );} );

<pre name="code" class="javascript">function format( d ) {// `d` is the original data object for the rowreturn '<fieldset class="fieldset123"><legend class="legend123">外观确认</legend><div id="data2"><table><tr>'+                                        '<td nowrap="nowrap" style="text-align:right">使用情况：</td>'+                    '<td style="text-align:left">'+d.use_status+'</td>'+                    '<td nowrap="nowrap" style="text-align:right">外观变形：</td>'+                    '<td style="text-align:left">'+d.surface_status+'</td>'+                    '<td nowrap="nowrap" style="text-align:right">缺少部分：</td>'+                    '<td style="text-align:left">'+d.missingpart_status+'</td>'+                    '<td nowrap="nowrap" style="text-align:right">包装是否完整：</td>'+                    '<td style="text-align:left">'+d.pack_status+'</td>'+                '</tr></table></div></fieldset>'+             }<span style="font-family: Arial, Helvetica, sans-serif;">//此处为需要展示的数据的式样和内容，可以任意添加你需要的内容，拼接各种的字符串，只有你想不到，没有你做不到，嘿嘿</span>

接下来便是后台传参数的代码了，我用的是thinkPHP框架的，然后就直接是PHP代码啦

<pre name="code" class="php">public function GetAcceptanceProductInfo(){     $acceptanceInfo = D('acceptance');    $condition = array();    $flag = I('get.flag');     $iDisplayLength = I('get.iDisplayLength');     if(I('post.pro_name')){        $condition['pro_name'] = I('post.pro_name');    }    if(I('post.pro_no')){        $condition['pro_no'] = I('post.pro_no');    }    if(I('post.manager_no')){        $condition['manager_no'] = I('post.manager_no');    }    if(I('post.repair_man')){        $condition['repair_man'] = I('post.repair_man');    }    if(I('post.accept_time')){        $condition['accept_time'] = I('post.accept_time');    }    if(I('post.disposal_result')){        $condition['disposal_result'] = I('post.disposal_result');    }    $condition['_logic'] = 'and';    $list = $acceptanceInfo->where($condition)->select();

//以上都是从数据库中查出来的数据啦，没什么好说的了，下面的才是最最重要的，将我们从数据库中取出来的数据发往前台，可以这么说吧

//人家前台解析需要json数据，所以我们也得给人家发json个数的数据嘛    $num = count($list);    $data = array(        'iTotalRecords' => $num,//数据的总条数        'iTotalDisplayRecords' => 10,//显示的条数        'aaData' => $list //此处为我们的list数据也就是从数据库中取出来的了);    echo json_encode($data);   }

因为此个控件是最新接触的，用的时候查了老多资料，也借鉴了不少人的劳动成果，总算是完成了

1 0