DataTable前端分页数据展示，展示表格我会弄，如果是展示一个个的div应该怎么弄

奇点洋 2019-07-19 05:39:05

用DataTable分页，用表格的方式展示出来我会弄，就是在columns里面直接写后端返回的字段就行了，那如果是一个盒子一个盒子的展示数据，这个columns应该咋写。先看以表格展示的前端代码：
<table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
<thead>
<tr>
</tr>
<tr>
<th style="width: 30%; text-align: center; font-size: 14px; letter-spacing: 1px">观测单号</th>
<th style="width: 20%; text-align: center; font-size: 14px; letter-spacing: 1px">观测天体</th>
<th style="width: 20%; text-align: center; font-size: 14px; letter-spacing: 1px">时间</th>
<th style="width: 20%; text-align: center; font-size: 14px; letter-spacing: 1px">观测人</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
下面是ajax：
<script type="text/javascript">
var example;
function init(){
example =
$('#dt-table').DataTable({
//自带的搜索框
"searching": false,
"processing": false,
//开启分页
"serverSide" : true,
//分页的中文插件
"language": {
"url": "/static/js/plugin/datatables/Chinese.lang"
},
"ajax": {
"url" : "/user/getOperationLog",
"type":"post",
"error":function(xhr, textStatus, errorThrown){
var msg = xhr.responseText;
console.log(msg);
var response = JSON.parse(msg);
var code = response.code;
var message = response.message;
if (code == 400) {
layer.msg(message);
} else if (code == 401) {
localStorage.removeItem("token");
layer.msg("token过期，请先登录", {shift: -1, time: 1000}, function(){
window.location.href = '/index/login-page';
});
} else if (code == 403) {
console.log("未授权:" + message);
layer.msg('未授权');
} else if (code == 500) {
layer.msg('系统错误：' + message);
}
}
},
"dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",
"columns": [
{ "data": "orderId", "defaultContent": ""},
{ "data": "target", "defaultContent": ""},
{ "data": "createDate", "defaultContent": ""},
{ "data": "user.lastName", "defaultContent": ""},
],
});
}
init();
</script>

然后看以div盒子展示的代码：
<div id="row2">

</div>
下面是ajax：现在是没用DataTable分页的，直接把后端返回的数据取到然后循环出来，追加到row2这个div下：
$.ajax({
url: '/user/getRegisterUserReviewLsit',
contentType: 'application/json; charset=UTF-8',//防止乱码
type: 'POST',
data: JSON.stringify(sendData),
dataType: 'json',
success: function (data) {
console.log(data);
$('#row2').empty();
if (data) {
if (data.code == 200) {
var listLength = data.data.list.length;
if (listLength > 0) {
//取出后端传的list
var chargeRuleLogs = data.data.list;
var pageIndex = data.data.pageNum;
var totalPages = data.data.pages;
var html = "";
// var child = "";
//遍历list
$.each(chargeRuleLogs, function (i, item) {
html += " <div>\n" +
" <div class=\"userMessage\">\n" +
" <p>用户名:   " + item.nickName + "</p>\n" +
" <p>姓   名:   " + item.lastName + " " + item.firstName + "</p>\n" +
" <p>证件号:   " + item.licenseNumber + "</p>\n" +
" <p>邮   箱:   " + item.username + "</p>\n" +
" </div>\n" +
" <div class='select'>\n" +
" <span data-id='" + item.userID + " ' class='past' onclick='pass(this);'>通过</span>\n" +
" <span data-id='" + item.userID + " ' class='noPast' onclick='refuse(this);'>不通过</span>\n" +
" </div>\n" +
" </div>"
});
//信息追加
$("#row2").append(html);
代码就这样，下面以这个盒子的方式展示数据的话，如果用DataTable，那么DataTable里面应该咋写，肯定跟表格的方式不同了，表格就直接把字段写到columns里面就行了，下面两张图片是一个表格的方式展示数据，一个是div盒子展示的数据

...全文

908 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_38096374 2021-06-22

打赏
举报

楼主，我现在也遇到了和你一样的问题，如果已解决，可否贴下代码参考一下

libza 2022-05-10

@qq_38096374 你会了吗

toorup 2019-07-24

打赏
举报

你试着看看css，不然你做前端没法做的，现在都不用表格了，看着的表格基本上也是CSS加div、li、ul等元素做出来的，显示速度和效率比table高。下面这个你看一下是不是你要的效果，中间三个重复部份你放到循环里就是了。

<html>
<head>
<title>Test</title>
<style>
body{margin:0px auto;width:960px;}

div.cbt{
width: 313px;
line-height: 28px;
height: 28px;
background-color: #F7F7F7;
border-bottom-width: 1px;
border-bottom-color: #CCCCCC;
padding-left: 3px;
}
div.cleft{
width: 313px;
overflow: hidden;
border:1px solid #CCCCCC;
}

dl{
border:2px solid #ffffff;
margin-top:15px;
float: left;
display: inline-block;
}
span.list_head{
padding-left: 5px;
font-size:14px;
color:#46A3FF;
}
ul,li{
list-style:none;margin:0;/*去掉li,ul前面的圆点*/
padding:3px; /*去掉前面空白，可设为0*/
font-size:12px;
border-bottom:1px #EAEAEA dashed;/*li加下划虚线*/
}

</style>
<script>
</script>
</head>
<body>

<dl class=he>
<div class=cbt><span class=list_head>用户信息</span></div>
<div id=cleft class=cleft>
<ul class=c_left>
<li>1.用户名:</li>
<li>2.姓名:</li>
<li>3.证件号：</li>
<li>4.邮箱:</li>
</ul>
</div>
</dl>
<dl class=he>
<div class=cbt><span class=list_head>用户信息</span></div>
<div id=cleft class=cleft>
<ul class=c_left>
<li>1.用户名:</li>
<li>2.姓名:</li>
<li>3.证件号：</li>
<li>4.邮箱:</li>
</ul>
</div>
</dl>
<dl class=he>
<div class=cbt><span class=list_head>用户信息</span></div>
<div id=cleft class=cleft>
<ul class=c_left>
<li>1.用户名:</li>
<li>2.姓名:</li>
<li>3.证件号：</li>
<li>4.邮箱:</li>
</ul>
</div>
</dl>

</body>
</html>

lzh_me 2019-07-24

打赏
举报

如果你非要用DataTables的话，只能是改变列的样式。2个思路，一个是改变td的样式，一个改变td内容的样式：
1、通过columns.className 指定列的样式，改成你需要的样子。
2、columns.render重新渲染，在你的列里面把内容渲染成你想要的样子。

奇点洋 2019-07-19

打赏
举报

引用 1 楼三岁打酱油的回复：


 { "data": "orderId", "defaultContent": "",  render: function ( data, type, row ) {
             return data; // 这里可以写div拼接的代码，可以写一个函数传数据返回拼接的字符串
   }},

咋写呀

jio可 2019-07-19

打赏
举报


 { "data": "orderId", "defaultContent": "",  render: function ( data, type, row ) {
             return data; // 这里可以写div拼接的代码，可以写一个函数传数据返回拼接的字符串
   }},