Html5分页显示Table
Html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Pick One</title>
</head>
<style type="text/css">
span{
/*display:inline;*/
margin:0 auto
}
.header
{
background: #ccc;
display: flex;
justify-content: space-between;
}
.nowtime
{
font-size:32px;
font-weight:bold;
}
.tname
{
font-size:48px;
color:#9400D3;
}
.endtime
{
font-size:32px;
color:#000F7F;
}
</style>
<script>
var Retimer=0;
var rtimr=0;
var pagecount=0;
var count=0;
var basecount=10;
var json=null;
$(document).ready(function() {
getData();
window.setInterval(function(){ getTime() },1000);
})
/*
function realSysTime(){
var now=new Date();
var year=now.getFullYear();
var month=now.getMonth();
var date=now.getDate();
var day=now.getDay();
var hour=now.getHours();
var minu=now.getMinutes();
var sec=now.getSeconds();
if(Number(sec)<10){
sec="0"+sec.toString();
}
month=month+1;
var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var week=arr_week[day];
var time=year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minu+":"+sec; //组合系统时间
document.getElementById("time").innerHTML=time;
}
*/
//获取数据
function getData(){
$.ajax({
url : "http://localhost:14047/bry.ashx",//请求地址
dataType : "json",//数据格式
type : "get",//请求方式
async : false,//是否异步请求
success : function(data) { //如何发送成功
console.log(data);
console.log(data["Title"]);
document.getElementById("ttt1").innerHTML=data["Title"]; json = eval (data["Data"]);
Retimer=data["RefreshTime"];
rtimr=Retimer;
show(json);
},
})
} //数据分页
function show(json){
var flg=false;
$("#table tr:not(:first)").html("");//清空表格内容
var nowcount=pagecount*basecount+basecount;
if(nowcount>=json.length)
{
flg=true;
nowcount=json.length;
}
for(var i=0 +pagecount*basecount;i< nowcount;i++){ //遍历data数组
var row=table.insertRow(table.rows.length);
var c1=row.insertCell(0);
c1.innerHTML=json[i].ID;
var c2=row.insertCell(1);
c2.innerHTML=json[i].Name;
var c3=row.insertCell(2);
c3.innerHTML=json[i].Age;
count=count++;
}
pagecount=pagecount+1;
if(flg)
{
pagecount=0;
count=0;
}
} //定时
function getTime(){
document.getElementById("countdown").innerHTML=Retimer;
Retimer=Retimer-1;
if(Retimer==-1)
{
show(json)
Retimer= rtimr;
}
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() +1;
var day = now.getDate();
var hh = now.getHours();
var mm = now.getMinutes();
var ss = now.getSeconds();
var clock = year + "-"; if(month < 10)
clock += "0"; clock += month + "-"; if(day < 10)
clock += "0"; clock += day + " "; if(hh < 10)
clock += "0"; clock += hh + ":";
if (mm < 10) clock += '0';
clock += mm + ":"; if (ss < 10) clock += '0';
clock += ss;
document.getElementById("time").innerHTML=clock;
}
</script>
<body>
<div class="header">
<span class="nowtime" id='time'></span>
<span class="tname" id='ttt1'></span>
<span class="endtime">倒计时
<span class="timecountdown" id='countdown'></span>
</span>
</div> <div>
<table id='table' class="table table-bordered table table-info table-hover">
<thead class="text-center">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
后端：.NET ashx
public class bry: IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
Dictionary<string, object> param = new Dictionary<string, object>();
string ret = "";
DataTable dt = new DataTable();//创建表
dt.Columns.Add("ID", typeof(Int32));//添加列
dt.Columns.Add("Name", typeof(String));
dt.Columns.Add("Age", typeof(Int32));
dt.Rows.Add(new object[] { 1, "张三", 20 });//添加行
dt.Rows.Add(new object[] { 2, "李四", 25 });
dt.Rows.Add(new object[] { 3, "王五", 30 });
dt.Rows.Add(new object[] { 4, "张三", 20 });//添加行
dt.Rows.Add(new object[] { 5, "李四", 25 });
dt.Rows.Add(new object[] { 6, "王五", 30 });
dt.Rows.Add(new object[] { 7, "张三", 20 });//添加行
dt.Rows.Add(new object[] { 8, "李四", 25 });
dt.Rows.Add(new object[] { 9, "王五", 30 });
dt.Rows.Add(new object[] { 10, "张三", 20 });//添加行
dt.Rows.Add(new object[] { 11, "李四", 25 });
dt.Rows.Add(new object[] { 12, "王五", 30 });
dt.Rows.Add(new object[] { 13, "张三", 20 });//添加行
dt.Rows.Add(new object[] { 14, "李四", 25 });
dt.Rows.Add(new object[] { 15, "王五", 30 });
dt.Rows.Add(new object[] { 16, "张三", 20 });//添加行
dt.Rows.Add(new object[] { 17, "李四", 25 });
dt.Rows.Add(new object[] { 18, "王五", 30 });
dt.Rows.Add(new object[] { 19, "张三", 20 });//添加行
dt.Rows.Add(new object[] { 20, "李四", 25 });
dt.Rows.Add(new object[] { 21, "王五", 30 });
dt.Rows.Add(new object[] { 22, "王五", 30 });
dt.Rows.Add(new object[] { 23, "王五", 30 });
dt.Rows.Add(new object[] { 24, "王五", 30 });
dt.Rows.Add(new object[] { 25, "王五", 30 });
dt.Rows.Add(new object[] { 26, "王五", 30 });
dt.Rows.Add(new object[] { 27, "王五", 30 });
dt.Rows.Add(new object[] { 28, "王五", 30 });
dt.Rows.Add(new object[] { 29, "王五", 30 });
dt.Rows.Add(new object[] { 30, "王五", 30 });
dt.Rows.Add(new object[] { 41, "李四", 25 });
dt.Rows.Add(new object[] { 42, "王五", 30 });
dt.Rows.Add(new object[] { 43, "张三", 20 });//添加行
dt.Rows.Add(new object[] { 44, "李四", 25 });
dt.Rows.Add(new object[] { 45, "王五", 30 });
dt.Rows.Add(new object[] { 46, "张三", 20 });//添加行
dt.Rows.Add(new object[] { 47, "李四", 25 });
dt.Rows.Add(new object[] { 48, "王五", 30 });
dt.Rows.Add(new object[] { 49, "张三", 20 });//添加行
dt.Rows.Add(new object[] { 50, "李四", 25 });
dt.Rows.Add(new object[] { 51, "王五", 30 });
dt.Rows.Add(new object[] { 52, "王五", 30 });
dt.Rows.Add(new object[] { 53, "王五", 30 });
dt.Rows.Add(new object[] { 54, "王五", 30 });
dt.Rows.Add(new object[] { 55, "王五", 30 }); string data = JsonConvert.SerializeObject(dt, new DataTableConverter()); param.Add("Title", "Witch One");
param.Add("RefreshTime", 5);
param.Add("NowTime", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"));
param.Add("Data", data);
ret = JsonConvert.SerializeObject(param);
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.ContentType = "text/html";
context.Response.Write(ret);
} public bool IsReusable
{
get
{
return false;
}
}
}
Html5分页显示Table的更多相关文章
- Table分页显示调整
这是table分页显示的代码,下面是对应调整的代码 /*分页调整*/ .fenye .dataTables_info{ line-height: 28px; } .fenye .pagination{ ...
- C#关于分页显示
---<PS:本人菜鸟,大手子还请高台贵手> 以下是我今天在做分页时所遇到的一个分页显示问题,使用拼写SQL的方式写的,同类型可参考哦~ ------------------------- ...
- JSP分页显示实例（基于Bootstrap）
首先介绍一款简单利落的分页显示利器:bootstrap-paginator 效果截图: GitHub官方下载地址:https://github.com/lyonlai/bootstrap-pagina ...
- JSP分页显示
首先要定义四个变量: int pageSize: //每页显示多少条记录 int pageNow: //希望显示第几页 int pageCount: //一共有多少页 int rowCount: // ...
- php中关于 left join 的分页显示
/* * 统计商机搜索总条数信息 * ftt * 2015-11-10 10:13:15 */ public function getBusinessCount($btype='',$buname=' ...
- SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
- java web 简单的分页显示
题外话:该分页显示是用 “表示层-控制层-DAO层-数据库”的设计思想实现的,有什么需要改进的地方大家提出来,共同学习进步. 思路:首先得在 DAO 对象中提供分页查询的方法,在控制层调用该方法查到指 ...
- 实例：SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
- 转：JSP 分页显示数据 (Oracle)
JSP 分页显示数据 (Oracle) 标签: Oracle分页JSP分页 2013-11-19 20:40 3598人阅读 评论(1) 收藏 举报 分类: Web(11) 版权声明:本文为博主原 ...
随机推荐
- webpack4.0源码解析之打包后js文件分析
首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,package.json,webpack.config. ...
- CSON vs JSON
CSON vs JSON 今天在github浏览资料时,无意发现了这个很像json,却优于json的cson.故,再次分享给大家! 官方fork文档:https://github.com/xgqfrm ...
- vue router & query params
vue router & query params vue router get params from url https://zzk.cnblogs.com/my/s/blogpost-p ...
- teamviewer远程是账号密码都没错但是报正在初始化参数...
1.出现这个原因,可能是 通过(mstsc)远程桌面方式运行了teamviewer,被远程控制电脑就会出现这个现象. 可以试一下 服务-teamviewer-属性-登录-本地系统账户 -允许服务与桌面 ...
- Django Admin 在内联中覆盖保存方法(admin.TabularInline)
一 使用环境 开发系统: windows IDE: pycharm 数据库: msyql,navicat 编程语言: python3.7 (Windows x86-64 executable in ...
- Mysql训练：where后不可以进行聚合函数的判断，而having可以进行聚合函数的判断
力扣题目:查找重复的电子邮箱 编写一个 SQL 查询,查找 Person 表中所有重复的电子邮箱. +----+---------+ | Id | Email | +----+---------+ | ...
- SpringBoot2.1中添加过滤器配置
1:构造一个实现 Filter 接口的过滤器,并在类上添加@component注释: notice1:若不添加,则需在spring中注入该bean,不然会报错. package com.dev.fil ...
- 小公举comm，快速比较两个排序文件
前言 我们经常会有需求比较一个文件里的内容是否在另一个文件存在.假如我有一份监控列表的IP写入在了file1,我所有的机器IP写入在了file2,我要找出还有哪些机器没有在监控列表.以前的做法是写个两 ...
- wxWidgets源码分析(9) - wxString
目录 wxString wxString的中文字符支持 Windows Linux Unicode Linux UTF-8 总结 wxString与通用字符串的转换 wxString对象的创建 将wx ...
- Git：使用远程仓库
远程仓库可使用Github.Gitee,或自建Gitlab.Gogs服务器,这里使用Github. 配置本地用户名和邮箱 # 配置本地用户的用户名邮箱(保存在用户.gitconfig文件) $ git ...