效果预览https://zhaosiqi.github.io/table-display/WebRoot/viewdisplay.html
大屏展示，兼容不同设备分辨率，数据获取，前台分页，自动轮播，table表格双色行等
内容表格数据需要及时展示在车间或者生产一线时，不同的屏幕设备怎么同时响应呢？
需求如图，大部分类似
- 要求样式如下，表格单双行
- 要求兼容不同分辨率的设备
- 要求数据及时刷新，自动填充，轮换等
思考了一下，开始动工，上代码。
function goPage(table, pno, psize) {
var num = table.find('.count').length;
var pageSize = psize;
var totalPage = 0;
//总共分几页
if(num / pageSize > parseInt(num / pageSize)) {
totalPage = parseInt(num / pageSize) + 1;
} else {
totalPage = parseInt(num / pageSize);
}
//设置当前页面
curPage = pno;
var startRow = (curPage - 1) * pageSize + 1; //开始显示的行
var endRow = curPage * pageSize; //结束显示的行
endRow = (endRow > num) ? num : endRow;
//遍历显示数据实现分页
for(var i = 1; i < (num + 1); i++) {
var irow = table.find('.count').eq(i - 1);
var irow1 = irow.next();
if(i >= startRow && i <= endRow) {
irow.show();
irow1.show();
} else {
irow.hide();
irow1.hide();
}
}
return {
"totalPage": totalPage,
"curPage": curPage
};
}
function freshPage() {
var tBodyHtml = $('.mainview').find('tbody');
setInterval(function() {
if(messageCur == totalMessagePage) {
messageCur = 1;
} else {
messageCur++;
}
goPage(tBodyHtml, messageCur, 12);
}, 10000);
}
搞定完这两个我觉的没有问题了，后面table样式布局却头疼了一会。因为一页显示几条数据是在代码里控制的，难免最后一页要少几条，不补齐那些空格子太丑了，为了避免被骂的准备开始着手实现。
var tbBody = "";
var trColor;
if (i % 2 == 0) {
trColor = "even";
}else {
trColor = "odd";
}
用最简单的办法实现，效果出来很是满意，等我看到最后一页的时候发现，因为没有实际数据，我动态生成的空格子都是一个颜色，这怎么能忍。来来回回试了很多遍，最后是这样解决的。
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
最后一页补齐空格子的时候加上这两句，ok，大功告成。
学无止境啊，诸君需共勉。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent