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盒子展示的数据
...全文
879 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拼接的代码,可以写一个函数传数据返回拼接的字符串
   }},
本课程是PowerBI系列课程之DAX函数专题讲解,包含以下内容 1.  DAX函数基础知识什么是DAX函数数学函数:ABS、DIVIDE、MOD、RAND、ROUND、FIXED等日期和时间函数: CALENDAR、CALENDARAUTO、MONTH、YEAR、DATE、DT等信息函数:USERNAME、USERPRINCIPALNAME、HASONEFILTER、HASONEVALUE、ISFILTERED、ISCROSSFILTERED、ISINSCOPE、ISBLANK、SELECTEDMEASURE、SELECTEDMEASURENAME等逻辑函数:AND、OR、IF、IFERROR、SWITCH、TRUE、FALSE、COALESCE(官方文档含糊不清-结合实例)等关系函数:CROSSFILTER、RELATED、RELATEDTABLE等筛选器函数:FILTER、CALCULATE、ALL、ALLEXCEPT、ALLSELECTED、EARLIER、KEEPFILTERS、REMOVEFILTERS、SELECTEDVALUE、LOOKUPVALUE等父子函数:PATH、PATHCONTAINS、PATHITEM、PATHLENGTH等统计函数:AVERAGE、COUNT、MAX、MIN、SUM等迭代统计函数:AVERAGEX、COUNTX、MAXX、MINX、SUMX、RANKX等表函数: FILTERS 、ADDCOLUMNS、 SELECTCOLUMNS、 CROSSJOIN、 EXCEPT、 GENERATE、 GROUPBY、 SUMMARIZE、 SUMMARIZECOLUMNS、 TOPN、 TREATAS、 UNION、 VALUES、DISTINCT、DATATABLE、NATUALINNERJOIN、NATRUALLEFTOUTERJOIN等文本函数: EXACT、MID、 FIND、 LEN、 REPT、 LOWER、 UPPER、 UNICHAR等时间智能函数:DATEADD、DATESMTD、FIRSTDATE、LASTDATE、SAMEPERIODLASTYEAR等财务函数:2020.7之后发布的,和Excel中财务函数相似,网页和demo pbix简单介绍其他函数:BLANK、ERROR、IFERROR等 DAX函数初体验:Max、Sum、Divide、if、Values等值函数表函数以及表和列的概念DAX函数术语、语法、运算符DAX运算符和引擎中字母大小写问题DAX编程注释和快捷键DAX与Excel函数的共同点和区别(PPT)DAX、xmSQL与SQL表达式的区别(PPT)DAX函数的自学途径 2.  PowerBI中数据建模知识维度建模关系传递和交叉筛选器方向-理解表关系(1v1, 1vM, Mv1,MvM)两个方向上应用安全筛选器关闭关系自动检测新建计算列新建度量值新建计算表:辅助表(五种方式)、日历表数据类型讲解数据格式控制:%、$、千位分隔符、小数位、日期格式Format函数自定义数据格式Convert函数做数据类型转换解决中文数字单位 万 的显示问题Date和DT函数定义固定日期值显示和隐藏列DAX代码分析器阅读DAX表达式方法:从上至下、由内到外(注意Calculate的计算顺序)调试DAX表达式方法:分布输出或VAR输出3.  DAX函数原理 Vertipaq列式数据库原理理解度量值和计算列理解行上下文和筛选上下文:Calculate示意图行上下文中使用VAR替代EARLIERVAR变量在定义时的上下文中计算VAR变量是采用惰性计算(使用时计算)理解扩展表和RELATED函数理解数据沿袭Lineage 4.  开始感知DAX函数的强大DAX函数实现特殊符号的使用DAX函数实现切片器默认当前月或天DAX函数使切片器默认代表无任何选择DAX函数使切片器仅显示有数据的选项DAX函数使切片器反向筛选和计算DAX函数使切片器之间取并集DAX函数使关系中多端的切片器筛选一端的切片器 DAX函数实现年月共同决定数据排序DAX函数实现动态图表标题DAX函数实现动态图表配色和图标DAX函数实现动态纵坐标DAX函数实现动态横坐标5.  理解重点DAX函数重中之重FILTER 和 CALCULATE和CALCULATETABLE详解调节器REMOVEFILTERS和ALL、ALLEXCEPT函数调节器ALL、ALLSELECTED和ISINSCOPE占比分析调节器AllSELECTED和KEEPFILTERS的比较调节器USERELATIONSHIP激活关系调节器TREATAS动态建立关系调节器CROSSFILTER改变筛选器方向重点之ISFILTERED和ISCROSSFILTERED重点之HASONEVALUE和ISINSCOPE的区别重点之表函数SELECTEDCOLUMNS和ADDCOLUMNS重点之表函数NATUALINNERJOIN和NATRUALLEFTOUTERJOIN重点之表函数FILTERS和VALUES比较重点之VALUES和DISTINCT的区别重点之分组函数SUMMARIZECOLUMNS详解重点之函数LOOKUPVALUE vs RELATED vs VLOOKUP 重点之集合函数UNION、INTERSECT、EXCEPT重点之集合函数CROSSJOIN和GENERATE 笛卡尔积重点之值合并、列合并、表合并CONCATENATEX重点之BLANK行产生的原因和BLANK相关函数重点之COALESCE函数处理空重点之FIRSTNOBLANK和FIRSTNOBLANKVALUE函数重点之使用VAR变量表中的列重点之Error和IfError函数6.  实际案例-日期时间和时间智能相关关键点-日期表和事实表关联问题时间智能-同比环比分析时间智能-累计聚合、滚动聚合、移动平均时间智能-期初期末库存分析日期分析-计算任意所选月份的环比日期分析-周的同比环比和周聚合日期分析-指定月份的同比环比和季度环比日期分析-计算季末或季末月份的数据日期分析-趋势图中根据最近月份取TopN日期分析-动态指定某个日期区间分析日期分析-动态任意区间段做数据对比日期分析-实现两个日期列的范围筛选日期分析-按工作日计算日期差日期分析-计算最近两次购买日期差日期分析-根据历史数据做销售预测日期时间函数和时间智能函数使用总结7.  实际案例-DAX函数进阶进阶-解决列排序对计算的影响进阶-实现切片器筛选之间的OR逻辑进阶-矩阵Matrix中高亮显示最大值最小值进阶-DAX列转行 vs 矩阵列转行和逆透视进阶-非日期类型的累计聚合进阶-排名逻辑的4种实现-RANKX详解进阶-分组内排名的实现和理解迭代函数进阶-TopN/BottomN和Others的实现进阶-TopN中实现动态指标进阶-TopN中实现N的动态进阶-分组内动态TopN和Others 进阶-商品折上折-迭代函数SUMX详解 进阶-分析客户购买行为进阶-找出无购买行为的客户进阶-客户购买商品关联度分析 进阶-新客户分析进阶-流失客户分析进阶-回流客户分析进阶-客户购买频次和区间分析进阶-RFM客户价值分析进阶-帕累托分析进阶-盈亏平衡分析报表性能优化思路(PPT)  

52,797

社区成员

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

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