博客

1、在表格内部显示截图：



实现效果：



2、首先是html部分：

<div class="m-grid-col m-grid-col-middle  m-grid-col-md-3">
<table class="table table-hover" id="table_18_class_id">
		<thead>
		<tr>
			<th>名称</th>
			<th>占比</th>
		</tr>
		</thead>
		<tbody>
			<c:forEach items="${molist}" var="entry" varStatus="index">
				<tr>
					<td  style="text-align:left;font-size: 14px;">${entry.cmName}</td>
					<td  style="text-align:left;font-size: 14px;">
						<a href="javascript:void(0);" data-target="#ajaxmodal"  data-toggle="modal" >
							<span data-toggle="popover" data-trigger="hover" data-html="true"  data-content="
										<table class='table table-bordered table-striped table-hover' style='width:150px;'>
											<tr>
												<td>国产</td>
												<td><zcyy:format value="${(qyclAcount==0?0:(entry.sfAccount/qyclAcount)*100)/2}" pattern="##.##"></zcyy:format>%</td>

											</tr>
											<tr>
												<td>进口</td>
												<td><zcyy:format value="${(qyclAcount==0?0:(entry.sfAccount/qyclAcount)*100)/2}"  pattern="##.##"></zcyy:format>%</td>
											</tr>
											</table>
									">
									<zcyy:format value='${qyclAcount==0?0:(entry.sfAccount/qyclAcount)*100}' pattern="##.##"></zcyy:format>%
							</span>
						</a>

					</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>
</div>

3、js部分：

var table18Class= $('#table_18_class_id').DataTable({
				"bAutoWidth":true,	//设置宽度自适应
				"lengthChange" : false,
				"scrollCollapse": true,
				"responsive": false,//关闭响应式效果,否则以上设置无效
				"paging": false, // 禁止分页
				"order" : [],
				"info": false,//是否显示左下角的页数条数信息
				"pageLength": 4,
				"pagingType": "numbers",
				//"scrollX": true,
				"scrollY": 160,
				columnDefs : [
					{
						"type":"number-percentage",//排序类型
						"targets":[1]//第几列按照排序类型进行排序
					},
					{
						targets : [0],
						orderable: false,//禁用排序
						render : function(data, type) {
							if(typeof(data) =='undefined' ){
								return ''
							}else{
								if(type === 'display' && data.length >8){
									return '<span  data-toggle=\"tooltip\" title=\"'+data+'\">'+data.substr(0,8) +'...</span>'
								}else{
									return '<span data-toggle=\"tooltip\" title=\"'+data+'\">'+data+'</span>'
								}
							}
						}
					},
					/*{
						targets : [1],
						render : function(data, type,row,meta) {
							console.log(data,type,row,meta);
							var html='';
							html+=''
							return '<span data-toggle=\"tooltip\"  title=\"<table><tr><td>国产：</td><td>1111</td></tr><tr><td>进口：</td><td>2222</td></tr></table>\">'+data+'</span>'
						}
					},*/

				],
				"drawCallback": function( settings ) {
					$("[data-toggle='popover']").popover({
						html : true,
						container:'body'
					});
				}
			});

其中最关键的就是drawCallback里的container:’body’属性，只有将该属性设置为body才可以，另外比如将$(“[data-toggle=‘popover’]”).popover放在drawCallback中才会生效。