设为首页 加入收藏

TOP

Beego 学习笔记7:JS分页(二)
2017-12-07 14:22:10 】 浏览:1586
Tags:Beego 学习 笔记 JS分页
sp;   新建一个list.html,其代码如下:

<!DOCTYPE html>
 
<html>
      <head>
        <title>首页 - 用户列表页面</title>
        <link rel="shortcut icon" href="/static/img/favicon.png" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>
          .am-cf{
            height: 50px;          
            margin-top: 30px;
            line-height: 50px;
            text-align: center;
            vertical-align: middle;
            margin-left: 40%;
          }
          .am-fr{
              float: left;
              line-height: 50px;
              text-align: center;
              vertical-align: middle;
              height: 50px;
              margin-top: -15px;
          }
          .am-pagination{
            list-style:none;
            height: 50px;    
            line-height: 50px;
            text-align: center;
            vertical-align: middle;
          }
          .am-pagination li{
            float:left;
            margin-left: 10px;
          }
          .am-pagination li a{
            text-decoration:none;
          }
          .am-jl{
              float: left;
              margin-left: 20px;
          }
          .am-active{
              color: #f00;
          }
        </style>
      </head>
    
    <body>
     
        <div class="row pull-right" style="margin-bottom: 20px;margin-right: 5px;text-align:right;margin-right: 40px;">
      
          <input type="text" placeholder="请输入名称" id="txt_search"/>
          <button class="" onclick="search()">搜索</button>
        </div>
            
        <table class="table table-striped table-hover table-bordered ">
          <thead>
           <th style="text-align: center">ID</th>
           <th style="text-align: center">名称</th>
           <th style="text-align: center">昵称</th>
           <th style="text-align: center">密码</th>
           <th style="text-align: center">Email</th>
           <th style="text-align: center">性别</th>
           <th style="text-align: center">手机号</th>
         </thead>
        
         <tbody id="sortable">
         </tbody>
        </table> <!--分页部分-->
        <div style="margin: 20px 0px 10px 0;">
         <table style="margin: 0 auto;">
             <tr>
                 <td>
                     <div id="pagination" class="pagination"></div>
                 </td>
             </tr>
         </table>
        </div>
        <script type="text/java script" src="/static/js/jquery-2.1.1.min.js"></script> 
        <script type="text/java script" src="/static/js/jquery.paginationNew.js"></script>     
        <script type="text/java script">
            //页面的初始化
            $(function () {            
              //分页数据
              InitData();
            })
            function search(){
                var search = $("#txt_search").val();//名称
                InitData();
            }
            //使用分页插件pagination分页显示1
        function InitData() {
            var search = $("#txt_search").val();//名称

            $.ajax({
                async: false,
                type: "post",
                url: "/Home/PageData",
                data: {
                    search: search,
                    pageno:0
                },
                success: function (data) {
                    console.log('首页数据')
                    console.log(data)      
                    var Count = data
首页 上一页 1 2 3 4 下一页 尾页 2/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Beego学习笔记5:MVC-VC 下一篇Gotorch - 多机定时任务管理系统

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目