用table，js实现web动态取数据并实现分页效果

最新推荐文章于 2019-08-23 16:54:00 发布

一帆风顺2019

最新推荐文章于 2019-08-23 16:54:00 发布

阅读量1.6k

点赞数

分类专栏： asp.net C# 文章标签： button js JS Js table 动态分页

本文链接：https://blog.csdn.net/xiaoweizhe/article/details/8225543

版权

C# 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

asp.net

14 篇文章 0 订阅

订阅专栏

上图为实现的效果图

分页过程

首先用table存储数据

创建几个表格需要根据数据库中数据的条数确定

每个表格存储的数据为五条所以第一个表格存储前五条，第二个存储六至十条.....。

网页显示的是第一个table其他table需要隐藏，隐藏的功能在js中完成。

图中的1,2,3页数是js中动态生成的div，因为不知道怎么让文字具有点击并调用后台程序的功能所以只能用js。

后台代码

using (SqlCommand cmd = conn.CreateCommand())//连接数据库得到数据库中共存储多少条数据
                {
                   cmd.CommandText = "select * from xfl; ";
                    int x = 0;int aaaa = 0;
                    using (SqlDataReader reader = cmd.ExecuteReader())
                    {
                        int l = 0;

                        for (; reader.Read(); l++)
                        {
                            Session["xyuan"] = l;
                            aaaa = l;//得到一共有多少条数据
                            }
                        Session["xyuan"] = l;
                        x = l / 5;//得到一共多少页每页五条记录
                        if (x * 5 < l)
                        {
                            x = x + 1;//这里l/5的值为整数默认是舍去小数，即若若果l=9结果为1，但是应该创建两个table，所以x=x+1;
                        }

}

                      int o = 0;
                    for (int a = 1; a <= x; a++)//得到页数x并创建x个表每个表附加五条数据共十行数据
                    {

                      Button1.Text = a.ToString();//将页数显示在网页上这里的button1是上图中看到共3页那个3

                        qqq = new Table();
                       //创建table
                        qqq.ID = "t" + a + "";//为table 赋ID值这里的id不能在下文中引用只能在js中进行调试

                        qqq.Visible = true;
                        qqq.CssClass = "xdtt";//这里是为了设置table的css，这里能做到当table生成后设置table的格式
                        TableRow Row2 = new TableRow();//新建行
                        TableCell Cell3 = new TableCell();
                        Cell3.Text = "标题";
                        Row2.Cells.Add(Cell3);
                        Cell3 = new TableCell();
                        Cell3.Text = "作者";
                        Row2.Cells.Add(Cell3);
                        Cell3 = new TableCell();
                        Cell3.Text = "时间";
                        Row2.Cells.Add(Cell3);
                        Cell3 = new TableCell();
                        Cell3.Text = "操作";
                        Row2.Cells.Add(Cell3);//将新建的列添加到行中
                        qqq.Rows.Add(Row2);//将新建的行添加到表格中

using (SqlDataReader reader = cmd.ExecuteReader())
                        {
                            for (int qq = 1; reader.Read(); qq++)
                            {
                                TableRow Row = new TableRow();//新建行
                                Row.CssClass = "tbiaoge";//为新建行提供classname方便css调整位置
                                TableRow Row1 = new TableRow();//新建列
                                Row1.CssClass = "tbiaoge1";
                                if (o < qq && qq <= a * 5)//qq为没次循环即建五个表循环五次没次从零开始，
                                    //但第二个表要的数据是第五条至第十条所以用o限制第二次循环o为5qq为1不满足条件直到qq为5时开始向表中赋值
                                {    o++;
                                    TableCell Cell = new TableCell();
                                    int ids = reader.GetInt32(reader.GetOrdinal("id"));
                                    Cell.Text = ids.ToString();
                                    Row.Cells.Add(Cell);
                                    Cell = new TableCell();//新建行
                                    string username = reader.GetString(reader.GetOrdinal("tfl"));
                                    Cell.Text = "<a href='http://www.baidu.com'>" + username + "</a>";
                                    Row.Cells.Add(Cell);
                                    Cell = new TableCell();//新建行
                                    string username1 = reader.GetString(reader.GetOrdinal("tfl"));
                                    Cell.Text = "<a href='http://www.baidu.com'>" + username1 + "</a>";
                                    Row.Cells.Add(Cell);
                                    int id = reader.GetInt32(reader.GetOrdinal("id"));
                                    Cell = new TableCell();//新建行
                                    Button xb = new Button();
                                    xb.Text = "删除";
                                    xb.CommandName = id.ToString();//为删除按钮赋数据库中每天数据的id值，删除功能需要通过按钮的CommandName这个值判定具体是删除第几条记录这样就能实现动态添加删除时间并可以得到删除的是哪条记录。
                                    xb.BorderStyle = BorderStyle.None;
                                    xb.ForeColor = System.Drawing.Color.Red;
                                    xb.Click += new EventHandler(xsc);//为按钮动态绑定事件
                                    Cell.Controls.Add(xb);
                                    Row.Cells.Add(Cell);
                                    //创建第二行
                                    TableCell Cell1 = new TableCell();
                                    string xxxxx = reader.GetString(reader.GetOrdinal("tfl"));
                                    Cell1.Text = xxxxx;
                                    Row1.Cells.Add(Cell1);//没次创建两行，第二行为回复信息只需一列

                                   qqq.Rows.Add(Row);
                                    qqq.Rows.Add(Row1);

                                    xplgl.Controls.Add(qqq);

                                }

}

cmd.ExecuteNonQuery();

}

        public void xsc(object sender, EventArgs e)//动态生成图中删除按钮的代码，
        {
            using (SqlConnection conn = new SqlConnection(connStr))
            {conn.Open();
                 using (SqlCommand cmd = conn.CreateCommand())
                {
                    Button b1 = (Button)sender;//得到是哪个button触法的时间，然后得到按钮CommandName的值而确定具体删除哪条记录，
                    int x = Convert.ToInt32(b1.CommandName);
                    cmd.CommandText = "delete from xfl where id="+x+"";
                    cmd.ExecuteNonQuery();
                    Response.Redirect("xpl.aspx");
                }
            }

        }

js代码

var x = "";

function xqx() {

//    var q = document.getElementById("t2");
//    q.style.display = "none";
    var q1 = document.getElementById("Button1");//得到名字为button1的id进行操作
    x = q1.defaultValue;//得到一共创建了多少table，因为此按钮显示的值是通过后台赋值，后台赋给按钮的值即为需要创建几个table，然后可以确定创建几页如图中标示为2的区域
    var par = document.getElementById("xjs");//我是将
    var son_tr = document.createElement("TR");
   var la=100;
    for(var i=1;i<=x;i++)
    {//循环得到每个表格的id并进行设置，使每个表格都隐藏即display为none
    la=la+50;
    var q1 = document.getElementById("t"+i+"");

    q1.style.display = "none";
    if (i == 1) {//将第一个表格显示出来，
        q1.style.display = "block";
    }
    var div = document.createElement("div");//创建div存放页数
    div.className = "tooltip";
    div.innerHTML =i;
    div.name = "t"+i+"";
    var oooo="";
    div.style.position = "absolute";
    div.style.borderstyle = "solid";
    div.style.border = "red";
    div.style.left = ""+la+"px";
    div.style.width = 100;
    div.onclick = function xxx() {//为动态创建的div添加事件
        for (var i = 1; i <= x; i++) {//将table全部隐藏

            var q1 = document.getElementById("t" + i + "");
            q1.style.display = "none";
        }
        oooo = this.name//得到具体哪个按钮激发的事件，然后使该表格显示在网页而其他表格隐藏
        var q = document.getElementById(oooo);

        q.style.display = "block";
    };
    var son_td = document.createElement("TD");
    son_td.appendChild(div);
    son_tr.appendChild(son_td);

}
    son_tr.appendChild(son_td);
    par.appendChild(son_tr);
}//下边的代码未使用
function iii() {

    var q = document.getElementById("t1");//使table1的display的属性为block即让table1显示在网页上。
    q.style.display = "block";

}