由于需要用到展开显示详情这个功能，在尝试了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" οnclick="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> 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" οnclick="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 rows
dt.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 row
return '<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);
}因为此个控件是最新接触的，用的时候查了老多资料，也借鉴了不少人的劳动成果，总算是完成了
扫一扫
1664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
