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盒子展示的数据
...全文
909 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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拼接的代码，可以写一个函数传数据返回拼接的字符串
   }},
DataTable实现纯前端分页(后端一次返回所有数据)
页面代码: <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/plugins/datatables/dataTables.bootstrap.css"> <script src="/static/plu...
使用jQuery开发datatable分页表格插件
　　 　　当系统数据量很大时，前端的分页、异步获取方式就成了较好的解决方案。一直以来，我都希望使用自己开发的 jquery 插件做系统。 　　现在，学习了 jquery 插件开发之后，渐渐地也自己去尝试着开发一些简单的插件，之前已经开发了手风琴、选项卡，今天和大家介绍一下这个 datatable 分页表格插件。 　　我们先讲解使用，再分析插件的实现方式。 　　手册地址：http://5i...
使用datatables实现前端分页处理--一个简单的实例
前言：很方便的分页处理，这里由前端处理数据，后端把所有数据要分页的数据都获取到，根据datatables设置的每页显示的数量即可进行分页显示（注意：如果有大量的数据进行分页时，自行修改配置） 主要操作： 前端： 这里需要相关的 css 和 js 文件，自行引入。 <link rel="stylesheet" href="/static/bootstrap/css/bootstrap...
用jquery datatables实现页面分页,前端分页,后端分页
这两天搞了点网页上的分页，真的是搞得欲仙欲死，现在也只能说是搞了个入门的水平吧，现在就来写下这几天的收获。      用的是datatables的框架，先来个框架的地址：https://datatables.net/,本人理解也不是很深，直接结合代码来解释下。 现在还没有写完，所以不能上传资源，现在只能说关键部分。 首先一个xml文件： jquery DataTables插件自
【编程实践】使用 jquery.dataTables 实现后端分页表格和综合搜索项目案例讲解
jquery.dataTables 是一款基于 jQuery 的表格插件，提供了丰富的功能和灵活的配置选项，可以轻松地实现各种表格需求，包括前端分页、后端分页、排序、过滤、搜索等等。本文将介绍如何使用 jquery.dataTables 实现后端分页表格和综合搜索，并通过一个实例来演示具体的实现方法。本文介绍了如何使用 jquery.dataTables 实现后端分页表格和综合搜索，并通过一个实际示例演示了如何在前端和后端之间进行数据交互，以及如何使用 AJAX 请求从服务器获取数据。
Ajax

52,792

社区成员

25,335

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章