datatabls 合并行，及在列前面添加数字
<!--<html>-->
<!--<head>-->
<meta charset="utf-8" />
<!--<title></title>-->
<!--<link rel="stylesheet" type="text/css" href="../../../css/surveryResultFb.css" />-->
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" charset="utf8" src="../../../js/plugin/dataTables/js/tooltip.js"></script>
<style>
* {
margin: 0 auto;
padding: 0;
}
* .coment_xu {
margin: 0 auto;
width: 96%;
/*border: 1px solid red;*/
margin-bottom: 20px;
}
* .coment_xu .top_xu {
width: 100%;
}
* .coment_xu .top_xu .top1_xu {
width: 100%;
}
* .coment_xu .top_xu .top1_xu .top2_xu {
width: 50%;
/*border: 1px solid blue;*/
margin: 0 auto;
}
* .coment_xu .text_xu {
width: 100%;
}
* .coment_xu .text_xu ul {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
font-size: 14px;
}
* .coment_xu .text_xu ul li {
display: inline-block;
width: 48%;
margin-top: 5px;
margin-left: 0%;
}
* .coment_xu .content {
width: 100%;
}
* .coment_xu .content table {
width: 100%;
border: 1px solid #797979;
border-collapse: collapse;
}
* .coment_xu .content table tr {
height:36px;
}
* .coment_xu .content table tr th {
border: 1px solid #797979;
font-weight: normal;
font-size: 14px;
}
* .coment_xu .content table tr td {
border: 1px solid #797979;
font-size: 14px;
}
* .coment_xu .content table tr td .satisficing {
height: 16px;
width: 16px;
cursor: pointer;
}
* .coment_xu .content table tr td .satisficing svg {
height: 16px;
width: 16px;
}
.bottom_submit {
width: 70px;
height: 26px;
border: 1px solid #15C7BD;
text-align: center;
line-height: 26px;
color: #15C7BD;
border-radius: 4px;
cursor: pointer;
margin: 20px 0 0 67px;
}
.bottom_submit:hover {
background-color: #15C7BD;
color: #fff;
}
/*#surveyResultTable thead th, #surveyResultTable thead td ,*/
/*#surveyResultTab thead th , #surveyResultTab thead td {*/
/*padding: 4px 18px ;*/
/*}*/
.table-striped>tbody>tr:nth-of-type(even) {
background-color: #f9f9f9;
}
.first {background: #e0e4e2; text-align: center !important;}
.table-striped>tbody>tr>td {
text-align: left;
}
table.dataTable thead th, table.dataTable thead td {
padding: 4px 18px;
/* border-bottom: 1px solid #111; */
font-size: 14px;
}
.dataTables_scrollHead {
background: #8E9AA9;
}
.dataTables_wrapper.no-footer .dataTables_scrollBody {
border-bottom: 1px solid #BCBCBC;
}
</style>
<!--</head>-->
<!--<body>-->
<div class="layui-container">
<div class="coment_xu">
<div class="top_xu">
<div class="top1_xu">
<div class="top2_xu">
<span class="xu_top_span">
北京协和医院物业服务满意度调查表
</span>
<span>MYDCB001</span>
</div>
</div>
</div>
<div class="text_xu">
<ul >
<li style="width:13%;"><span>调查区域：</span><span>外科楼</span></li>
<li style="width:13%;"><span>调查科室：</span><span>外科</span></li>
<li style="width:21%;"><span >调查表下发时间：</span><span>每月25号</span></li>
<li style="width:23%;"><span>调查表提交时间：</span><span>每月26至30号</span></li>
</ul>
<ul>
<li>
<!--<span style=" display: inline-block;width:40%;">调查表填写人 ：</span>-->
<div style="width:100%;">
<table id="surveyResultTable" style="width:100%;text-align: center;" class="dataTable">
<thead>
<tr>
<th>序号</th>
<th>角色</th>
<th>人员名称</th>
</tr>
</thead>
</table>
</div>
</li>
<li style="margin-left: 3%;">
<!--<span style="display: inline-block;width:40%;">调查表结果发送给：</span>-->
<div style="width:100%;">
<table id="surveyResultTab" style="width:100%;text-align: center;" class="dataTable">
<thead>
<tr>
<th>序号</th>
<th>角色</th>
<th>人员名称</th>
</tr>
</thead>
</table>
</div>
</li>
<!--<li ><span style="padding-left: 30%;">填表日期：</span><span id="createTime">小王</span></li>-->
</ul>
</div>
<div class="content">
<table id="surveyResultT" style="width:100%;text-align: center;" class="dataTable table-striped">
<thead>
<tr>
<th style="width:20%;">评价项</th>
<th>评价内容</th>
</tr>
</thead>
</table>
</div>
</div>
<!--</body>-->
<!--</html>-->
模拟数据
{
"recordsFiltered": 2512,
"data": [
{
"id": 1,
"service":"保洁服务",
"content": "保洁员形象（统一着装、仪容仪表、文明礼貌、主动问好）"
},
{
"id":2,
"service":"保洁服务",
"content":"保洁员守时守纪，不做与工作无关的事，如聊天、脱岗、睡岗、吃东西等"
},
{
"id":3,
"service":"保洁服务",
"content":"卫生间清理及时，无异味，地面台面镜子无水渍"
},
{
"id":4,
"service":"保洁服务",
"content":"诊室/病房清洁消毒及时，地面、桌面干净"
},
{
"id":5,
"service":"保洁服务",
"content":"公共区域清扫及时，候诊椅摆放整齐，椅面干净、无垃圾"
},
{
"id":6,
"service":"保洁服务",
"content":"垃圾桶清理及时，垃圾量未超过桶量的2/3，垃圾桶表面洁净无污渍"
},
{
"id":7,
"service":"保洁服务",
"content":"保洁员接受过专业培训，保洁操作规范，打扫过程中放置相关标识，入室保洁提前敲门"
},
{
"id":8,
"service":"保洁服务",
"content":"保洁员有节能意识，能随手关灯、节约用水、主动报修"
},
{
"id":9,
"service":"保洁服务",
"content":"保洁主管与科室有定期巡视和沟通，能及时解决日常问题"
},
{
"id":10,
"service":"工程维修服务",
"content":"员工形象（统一着装、仪容仪表、文明礼貌、主动问好)"
},
{
"id":11,
"service":"工程维修服务",
"content":"员工态度（热情、主动、认真、负责，有服务意识)"
},
{
"id":12,
"service":"工程维修服务",
"content":"遵时守纪，不做与工作无关的事，如聊天、脱岗、睡岗、吃东西等"
},
{
"id":13,
"service":"绿植服务",
"content":"绿植定期养护，植株长势良好，叶片无枯黄，无灰尘杂质"
},
{
"id":14,
"service":"绿植服务",
"content":"绿植摆放整齐，同一区域内垫盘、花盆、花架颜色一致"
},
{
"id":15,
"service":"电梯服务",
"content":"员工形象（统一着装、文明礼貌)"
}
],
"draw": "5",
"recordsTotal": 2512
}
js代码
**
* Created by Administrator on 2017/9/6 0006.
*/
//ҳ���ʼ��
$(function() {
var satisfactionSurveyF =new satisfactionSurveyFb();
satisfactionSurveyF.init();
});
function satisfactionSurveyFb(){
}
satisfactionSurveyFb.prototype = {
init: function () {
this.render();
},
render: function () {
this.dataInit();
},
dataInit:function(){
$(document).ready( function () {
//��һ�����ajax���������
// $('#surveyResultTable').DataTable({
// "bProcessing" : true,
// "sScrollX":"100%",
// "sScrollY" : 170, //DataTables�ĸ�
// "bPaginate" : false, //�Ƿ���ʾ��Ӧ�ã���ҳ��
// "bInfo" : false, //�Ƿ���ʾҳ����Ϣ��DataTables������½���ʾ��¼��
// "bFilter" : false, //�Ƿ��������ˡ���������
// //������
// "fnDrawCallback": function () {
// this.api().column(0).nodes().each(function (cell, i) {
// cell.innerHTML = i + 1;
// });
// },
// //"fnServerData": function (sSource, aoData, fnCallback) {
// // var param = {};
// // //for (var i in aoData) {
// // // param[aoData[i]["name"]] = aoData[i]["value"];
// // // console.log(param);
// // //}
// // //param = $.extend(true, {}, param, objs);
// // param = {"name":parseInt($(".selectVal").text())};
// // $.ajax({
// // url: "../../../js/plugin/dataTables/js/2.txt",
// // type: "POST",
// // data: param,
// // success: function (result) {
// // fnCallback(result.data);
// // }
// // })
// //},
// /*"processing": true,
// "serverSide": true,*/
// "ajax": {
// url:"../../../js/plugin/dataTables/js/7.txt",
// type:"POST",
// data:{"name":parseInt($(".selectVal").text())}
// },
// "columns": [
// {"data":"id", "orderable": false },
// {"data":"lastName", "orderable": false},
// {"data":"firstName", "orderable": false}
// ]
// });
//�ڶ������ajax���������
// $('#surveyResultTab').DataTable({
// "bProcessing" : true,
// "sScrollX":"100%",
// "sScrollY" : 170, //DataTables�ĸ�
// "bPaginate" : false, //�Ƿ���ʾ��Ӧ�ã���ҳ��
// "bInfo" : false, //�Ƿ���ʾҳ����Ϣ��DataTables������½���ʾ��¼��
// "bFilter" : false, //�Ƿ��������ˡ���������
// //������
// "fnDrawCallback": function () {
// this.api().column(0).nodes().each(function (cell, i) {
// cell.innerHTML = i + 1;
// });
// },
// "ajax": {
// url:"../../../js/plugin/dataTables/js/2.txt",
// type:"POST",
// data:{"name":parseInt($(".selectVal").text())}
// },
// "columns": [
// {"data":"id", "orderable": false },
// {"data":"lastName", "orderable": false},
// {"data":"firstName", "orderable": false}
// ]
// });
//����Ĵ�����������
$('#surveyResultT').DataTable({
"bProcessing" : true,
"sScrollX":"100%",
"sScrollY" : 300, //DataTables�ĸ�
"bPaginate" : false, //�Ƿ���ʾ��Ӧ�ã���ҳ��
"bInfo" : false, //�Ƿ���ʾҳ����Ϣ��DataTables������½���ʾ��¼��
"bFilter" : false, //�Ƿ��������ˡ���������
"ordering":false,
"ajax": {
url:"data/8.txt",
type:"get",
data:{"name":parseInt($(".selectVal").text())}
},
rowId:"id",
"columns": [
//{"data":"id", "orderable": false },
{"data":"service"},
{"data":"content"}
],
"columnDefs":[
{
//设置第一列不参与搜索
"targets":[0],
"orderable":false
},
{
//设置第二列不参与搜索
"targets":[1],
"orderable":false
}
],
initComplete: function (setting, json) {
},
createdRow: function( row, data, dataIndex ) {
$('td:eq(1)', row).addClass("text");
},
drawCallback: function(settings){
//console.log(settings.aoData);
//var api = this.api();
// 输出当前页的数据到浏览器控制台
//console.log( api.rows( {page:'current'} ).data() );
$('#surveyResultT').mergeCell({cols: [0] });
if(settings.aoData.length > 0){
}
}
// columnDefs: [{
// render: function ( data, type, row ) {
// return " <div class='labEnergySourceDevice'> <input type='checkbox' value='"+data+"' id='"+data+"' /> <label for='"+data+"'></label> ";
// },
// targets: [0]
// },{
// render: function ( data, type, row ) {
//// var thisValue = JSON.stringify(row);
// return " <a class='icon detailImg' title='�鿴��ϸ��Ϣ'></a> ";
// },
// targets: [8]
// }]
});
} );
},
};
;(function($) {
// 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件
// 才保留了jQuery.prototype这个形式
$.fn.mergeCell = function(options) {
return this.each(function() {
var cols = options.cols;
for ( var i = cols.length - 1; cols[i] != undefined; i--)
{
// fixbug console调试
// console.debug(cols[i]);
mergeCell($(this), cols[i]);
}
dispose($(this));
});
};
// 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
// 具体可以参考本人前一篇随笔里介绍的那本书
function mergeCell($table, colIndex) {
$table.data('col-content', ''); // 存放单元格内容
$table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
$table.data('col-td', $()); //
//存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
$table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数,
//用于最后一行做特殊处理时进行判断之用
// 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
$('tbody tr', $table).each(function(index) {
// td:eq中的colIndex即列索引
var $td = $('td:eq(' + colIndex + ')', this);
var id = this.id; //获取唯一标识
// 取出单元格的当前内容
var currentContent = $td.html();
// 第一次时走此分支
if ($table.data('col-content') == '') {
$table.data('col-content', currentContent);
$table.data('col-td', $td);
$td.next().prepend("1、");
} else {
// 上一行与当前行内容相同
if (($table.data('col-content') == currentContent)) {
// 上一行与当前行内容相同则col-rowspan累加, 保存新值
var rowspan = $table.data('col-rowspan') + 1;
$table.data('col-rowspan', rowspan);
$td.next().prepend(rowspan+"、");
// 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
//$td.hide();
$td.remove();
// 最后一行的情况比较特殊一点
// 比如最后2行 td中的内容是一样的,
//那么到最后一行就应该把此时的col-td里保存的td设置rowspan
if (++index == $table.data('trNum')){
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
} else { // 上一行与当前行内容不同
// col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
if ($table.data('col-rowspan') != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
$td.next().prepend("1、");
// 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
$table.data('col-td', $td);
$table.data('col-content', $td.html());
$table.data('col-rowspan', 1);
}
}
$table.data('col-td').addClass("first");
});
}
// 同样是个private函数 清理内存之用
function dispose($table) {
$table.removeData();
}
})(jQuery);