某离职同事写的页面,分页条显示灰色,但是能正常跳转页面

提问 未结 8 246
0ERROR
0ERROR 2019-8-7
悬赏:100飞吻
版本:layui 浏览器:

上图是他做的页面,不知道为什么分页条这里确定键和页码是灰色的,给人一种无法点击的错觉,但是功能是正常的。

这是他往前端返回的代码,如果我直接把code写成200,就不会显示列表,而是直接显示“成功”二字,很奇怪。前端页面如下:
<!DOCTYPE html>
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">


<head>
<title>财务平台</title>
<th:block th:replace="common/common :: jscss"/>
<!--bootstrap的样式-->
<link rel="stylesheet" type="text/css" th:href="@{/static/bootstrap/css/bootstrap.min.css}"/>
<!--bootstrap的样式-->
</head>
<div class="layui-card">
<div th:replace="statement/information/_query::queryForm"></div>

<div style="padding: 20px">
<table id="headoffice-settle-table">
</table>

</div>
</div>

<script th:inline="javascript">
layui.use(['layer', 'table', 'laypage'], function () {
var table = layui.table;
var form = layui.form;
var tbins = table.render({
elem: "#headoffice-settle-table",
toolbar: '#n',
defaultToolbar: ['filter'],
title: "分类列表",
url: '/statement/ajaxListInfoData?orderMode=' + [[${orderMode}]] + '&companyType=' + [[${companyType}]] + '&customerType=' + [[${customerType}]],
cols: [[
{field: 'companyName', title: '结算主体', align: 'center'},
{field: 'statementId', title: '结算单号', align: 'center'},
{field: 'customerName', title: '结算对象', align: 'center'},
{field: 'beginDate', title: '起始日期', align: 'center'},
{field: 'endDate', title: '截止日期', align: 'center'},
{field: 'orderCount', title: '本期订单', align: 'center'},
{
field: 'payableAmount', title: '本期应付(元)', align: 'center', templet: function (d) {
return '<div style="text-align: right">' + zmnMothedUtil.numberFormat(d.payableAmount / 100, 2) + '</div>'
}
},
{
field: 'paidAmount', title: '本期已付(元)', align: 'center', templet: function (d) {
return '<div style="text-align: right">' + zmnMothedUtil.numberFormat(d.paidAmount / 100, 2) + '</div>'
}
},
{
field: 'manageCost', title: '订单服务费', align: 'center', templet: function (d) {
return '<div style="text-align: right">' + zmnMothedUtil.numberFormat(d.manageCost / 100, 2) + '</div>'
}
},
{
field: 'couponCost', title: '优惠券分摊', align: 'center', templet: function (d) {
if (parseInt(d.couponCost) > 0) {
return '<div style="text-align: right">' + '-' + zmnMothedUtil.numberFormat(d.couponCost / 100, 2) + '</div>'
} else {
return '<div style="text-align: right">' + d.couponCost + '</div>'
}
}
},
{
field: 'discountCost', title: '优惠减免分摊', align: 'center', templet: function (d) {
if (parseInt(d.discountCost) > 0) {
return '<div style="text-align: right">' + '-' + zmnMothedUtil.numberFormat(d.discountCost / 100, 2) + '</div>'
} else {
return '<div style="text-align: right">' + d.discountCost + '</div>'
}
}
},
{
field: 'integralCost', title: '积分抵扣分摊', align: 'center', templet: function (d) {
if (parseInt(d.integralCost) > 0) {
return '<div style="text-align: right">' + '-' + zmnMothedUtil.numberFormat(d.integralCost / 100, 2) + '</div>'
} else {
return '<div style="text-align: right">' + d.integralCost + '</div>'
}
}
},
{field: 'statusStr', title: '结算状态', align: 'center'},
{
field: 'payTime',
title: '付款日期',
align: 'center',
templet: function (d) {
if (d.payTime != null) {
return layui.util.toDateString(d.payTime, 'yyyy年MM月dd日 HH:mm:ss')
} else {
return "<div></div>"
}
}
},
{
field: 'statementId',
fixed: 'right',
width: 180,
title: '操作',
align: 'center',
templet: function (d) {
var show = (d.status == '40') ? '' : 'none';
// var statemetnShow = (d.status == '10' || d.status == '31' || d.status == '40') ? '' : 'none';
var statemetnShow = '';
return '<div class="layui-btn-group">' +
'<a href="/statement/showStatement?statementId=' + d.statementId + '&tab=结算单" style="cursor: pointer;display: ' + statemetnShow + '" class="layui-btn layui-btn-sm layuiadmin-button-btn">结算单</a>\n' +
'<a href="/statement/showStatement?statementId=' + d.statementId + '&tab=结算单明细" style="cursor: pointer;display: ' + statemetnShow + '" class="layui-btn layui-btn-sm layuiadmin-button-btn">结算明细</a>\n' +
'<a href="/statement/showStatement?statementId=' + d.statementId + '&tab=付款单" style="cursor: pointer;display: ' + show + '" class="layui-btn layui-btn-sm layuiadmin-button-btn">付款单</a>\n' +
'</div>'
}
},

]],
page: {
limit: 50
, limits: [50, 100, 150]
}
});
clickQuery(function (where) {
if (where && where.statementId) {
var statementId = where.statementId;
if (!zmnRegularExpressionUtil.isInteger(statementId)) {
layer.msg("请输入正确的结算单号");
return false;
}
if (Number(statementId) > 9223372036854775807 || Number(statementId) < -9223372036854775808) {
layer.msg('结算单号数字超出限制');
return false;
}
}
tbins.reload({
page: {
curr: 1 //重新从第 1 页开始
},
where: where
})
})
});
</script>
</html>
我希望这个独特的页面能和其他保持一致,显示成这个样子,不知道怎么修改?
回帖
  • 孤独丶
    2019-8-7
    审查下元素啊 估计是样式的问题
    1 回复
  • 0ERROR
    2019-8-7
    @若惜 我也觉得是样式问题,但不知道哪里设置这个样式了,加载表格的时候只指定了limit和limits,按理说不应该这样
    0 回复
  • IDyun
    2019-8-7
    layui table 默认成功代码 是 code=0 ,对应 200 那么就是错误代码,列表显示对应接口返回的错误信息
    如果有需要改成其它可以用 response 方法 或者 request 方法 改。
    0 回复
  • 孤独丶
    2019-8-7
    审查元素啊 看看这个按钮上面是不是有自己写的样式
    0 回复
  • lll_lll
    2019-8-7
    layui.use(['layer', 'table', 'laypage'], function () {})
    也没看见你的代码对 laypage 做什么样式的操作,但是建议去掉 laypage 试一下吧
    0 回复
  • css代码 直接写在这个面页试下
    .layui-laypage button {
    //你要的样式
    }
    不过你最好审查元素 直接可以看到是哪个文件改的css
    0 回复
  • 0ERROR
    2019-8-7
    @DJ李二狗 我不是专门的前端,只知道按F12不知道怎么审查 [生病]
    0 回复

  • ....难搞哦... 问题多不怕 ,进步的会更快 加油
    0 回复