zoukankan      html  css  js  c++  java
  • context分页

    <%@page import='com.sun.org.apache.bcel.internal.generic.DALOAD'%>
    <%@ page language='java' contentType='text/html; charset=UTF-8'
    pageEncoding='UTF-8' ,java.util.*,cn.bdqn.bean.Detail'%>
    <%--导入核心标签库 --%>
    <%@taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c'%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <title>登录成功页面</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta name='description' content='Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.'>
    <meta name='author' content='Muhammad Usman'>

    <!-- The styles -->
    <link id='bs-css' href='css/bootstrap-cerulean.css' rel='stylesheet'>
    <style type='text/css'>
    body {
    padding-bottom: 40px;
    +"
    .sidebar-nav {
    padding: 9px 0;
    +"
    </style>
    <link href='css/bootstrap-responsive.css' rel='stylesheet'>
    <link href='css/charisma-app.css' rel='stylesheet'>
    <link href='css/jquery-ui-1.8.21.custom.css' rel='stylesheet'>
    <link href='css/fullcalendar.css' rel='stylesheet'>
    <link href='css/fullcalendar.print.css' rel='stylesheet' media='print'>
    <link href='css/chosen.css' rel='stylesheet'>
    <link href='css/uniform.default.css' rel='stylesheet'>
    <link href='css/colorbox.css' rel='stylesheet'>
    <link href='css/jquery.cleditor.css' rel='stylesheet'>
    <link href='css/jquery.noty.css' rel='stylesheet'>
    <link href='css/noty_theme_default.css' rel='stylesheet'>
    <link href='css/elfinder.min.css' rel='stylesheet'>
    <link href='css/elfinder.theme.css' rel='stylesheet'>
    <link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
    <link href='css/opa-icons.css' rel='stylesheet'>
    <link href='css/uploadify.css' rel='stylesheet'>
    <link rel='shortcut icon' href='img/favicon.ico'>

    </head>
    <body>
    <div class='row-fluid sortable'>
    <div class='box span12'>
    <div class='box-header well' data-original-title>
    <h2><i class='icon-user'></i>欢迎:${sessionScope.user.userName+"</h2>
    <div class='box-icon'>
    <a href='#' class='btn btn-setting btn-round'><i class='icon-cog'></i></a>
    <a href='#' class='btn btn-minimize btn-round'><i class='icon-chevron-up'></i></a>
    <a href='#' class='btn btn-close btn-round'><i class='icon-remove'></i></a>
    </div>
    </div>
    <div class='box-content'>
    <table class='table table-striped table-bordered bootstrap-datatable '>
    <thead id='thead'>
    <tr>
    <th>新闻编号</th>
    <th>操作</th>
    </tr>
    </thead>

    <tbody id='tbody'></tbody>





    <nav aria-label='Page navigation'>
    <ul>
    <li><a href='javascript:' id='one'>首页</a></li>
    <li><a href='javascript:' id='back'>上一页</a></li>
    <li><a href='javascript:' id='next'>下一页</a></li>
    <li><a href='javascript:' id='last'>尾页</a>/a></li>
    </ul>
    </nav>
    </div>
    </div><!--/span-->
    </div><!--/row-->





    <%--模态窗口 --%>
    <div class='modal hide fade' id='myModal'>
    <div class='modal-header'>
    <button type='button' class='close' data-dismiss='modal'>×</button>
    <h3>是否删除?</h3>
    </div>
    <div class='modal-body'>
    <p>真的要删除吗?</p>
    </div>
    <div class='modal-footer'>
    <!-- 隐藏域 -->
    <input type='hidden' id='url'>
    <a href='#' class='btn' data-dismiss='modal'>关闭</a>
    <a href='#' class='btn btn-primary' onclick='delSubmit()'>删除</a>
    </div>
    </div>





    <!-- jQuery -->
    <script src='js/jquery-1.7.2.min.js'></script>
    <!-- jQuery UI -->
    <script src='js/jquery-ui-1.8.21.custom.min.js'></script>
    <!-- transition / effect library -->
    <script src='js/bootstrap-transition.js'></script>
    <!-- alert enhancer library -->
    <script src='js/bootstrap-alert.js'></script>
    <!-- modal / dialog library -->
    <script src='js/bootstrap-modal.js'></script>
    <!-- custom dropdown library -->
    <script src='js/bootstrap-dropdown.js'></script>
    <!-- scrolspy library -->
    <script src='js/bootstrap-scrollspy.js'></script>
    <!-- library for creating tabs -->
    <script src='js/bootstrap-tab.js'></script>
    <!-- library for advanced tooltip -->
    <script src='js/bootstrap-tooltip.js'></script>
    <!-- popover effect library -->
    <script src='js/bootstrap-popover.js'></script>
    <!-- button enhancer library -->
    <script src='js/bootstrap-button.js'></script>
    <!-- accordion library (optional, not used in demo) -->
    <script src='js/bootstrap-collapse.js'></script>
    <!-- carousel slideshow library (optional, not used in demo) -->
    <script src='js/bootstrap-carousel.js'></script>
    <!-- autocomplete library -->
    <script src='js/bootstrap-typeahead.js'></script>
    <!-- tour library -->
    <script src='js/bootstrap-tour.js'></script>
    <!-- library for cookie management -->
    <script src='js/jquery.cookie.js'></script>
    <!-- calander plugin -->
    <script src='js/fullcalendar.min.js'></script>
    <!-- data table plugin -->
    <script src='js/jquery.dataTables.min.js'></script>

    <!-- chart libraries start -->
    <script src='js/excanvas.js'></script>
    <script src='js/jquery.flot.min.js'></script>
    <script src='js/jquery.flot.pie.min.js'></script>
    <script src='js/jquery.flot.stack.js'></script>
    <script src='js/jquery.flot.resize.min.js'></script>
    <!-- chart libraries end -->

    <!-- select or dropdown enhancer -->
    <script src='js/jquery.chosen.min.js'></script>
    <!-- checkbox, radio, and file input styler -->
    <script src='js/jquery.uniform.min.js'></script>
    <!-- plugin for gallery image view -->
    <script src='js/jquery.colorbox.min.js'></script>
    <!-- rich text editor library -->
    <script src='js/jquery.cleditor.min.js'></script>
    <!-- notification plugin -->
    <script src='js/jquery.noty.js'></script>
    <!-- file manager library -->
    <script src='js/jquery.elfinder.min.js'></script>
    <!-- star rating plugin -->
    <script src='js/jquery.raty.min.js'></script>
    <!-- for iOS style toggle switch -->
    <script src='js/jquery.iphone.toggle.js'></script>
    <!-- autogrowing textarea plugin -->
    <script src='js/jquery.autogrow-textarea.js'></script>
    <!-- multiple file upload plugin -->
    <script src='js/jquery.uploadify-3.1.min.js'></script>
    <!-- history.js for cross-browser state change on ajax -->
    <script src='js/jquery.history.js'></script>
    <!-- application script for Charisma demo -->
    <script src='js/charisma.js'></script>
    <%--模态窗口的js --%>
    <script type='text/javascript'>
    function del(delUrl){
    $('#url').val(delUrl);
    $('#myModal').modal('show');

    //模态窗口的真正删除
    function delSubmit(){



    /*Ajax分页*/
    $(function(){
    //分页的四要素
    var pageIndex='';//当前页
    var pageSize='';//页大小
    var totalPageCount='';//总页数
    var totalCountSize='';//总记录数

    //用户第一次打开这个页面什么数据都没有,但是必须有,访问后代数据库
    pageInit(pageIndex);//初始化数据

    function pageInit(pageIndex){
    $('#one').show();
    $('#back').show();
    $('#next').show();
    $('#last').show();//第一次显示所有的 超链接

    //使用ajax访问servlet
    $.ajax({
    url:'listServlet',
    type:'POST',
    data:{"pageIndex":pageIndex}, //把用户传递的当前页发送给后台servlet
    dataType:"json",
    contentType:"application/x-www-foem-urlencoded;charset=utf-8",
    success:callBack//调用回调函数
    });


    function callBack(data){//data就是后台传递的数据
    //每次都需要清空上次的内容
    $("#tbody").html("");
    $(data).each(function(){//each start
    if(this.pageUtil!=null){//给分页四要素赋值

    pageIndex=this.pageUtil.pageIndex;
    pageSize=this.pageUtil.pageSize;
    totalPageCount=this.pageUtil.pageCount;
    totalCoountSize=this.pageUtil.totalCount;



    //开始给tbody拼接 将之前的代码赋值过来,
    //1.ctrl+f 所有的“变’
    //2.所有行(第一行不用)前面添加+“ 最后加” 大招shift+alt+a
    //3.
    $('#tbody').append(
    "<tr><td class='center'>"+this.id+"</td> "
    +"<td class='center'>"+this.title+"</td> "
    +"<td class='center'>"+this.author+"</td> "
    +"<td class='center'>"+this.summary+"</td> "
    +"<td class='center'>"+this.createDate+"</td> "
    +"<td class='center'> "
    +"<a class='btn btn-success' href='#' onclick='window.location.href='NewsCotegoryServlet''> "
    +"<i class='icon-zoom-in icon-white'></i> 新增 </a> "
    +"<a class='btn btn-info' href='#' onclick='window.location.href='FindId.do?id="+this.id+"''> "
    +"<i class='icon-edit icon-white' ></i>修改</a> "
    +"<a class='btn btn-danger' href='#' onclick='del('delnews.do?id="+this.id+"')'> "
    +"<i class='icon-trash icon-white'></i>删除</a></td></tr> ");
    });
    }
    $("#one").click(function(){
    //首页
    pageInit(1);
    });
    $("#last").click(function(){
    //尾页
    pageInit(totalPageCount);
    });
    $("#back").click(function(){
    if((pageIndex)-1>0){pageInit(pageIndex-1)}
    else{
    $("#one").hide();
    $("#back").hide();
    }
    });

    $("#next").click(function(){
    //下一页
    if((pageIndex+1)<totalPageCount){
    pageInit(pageIndex+1);
    }else{
    $("#last").hide();
    $("#next").hide();
    }
    });
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    c语言进阶2-变量的作用域与无参函数
    《Linux 性能及调优指南》3.2 CPU瓶颈
    《Linux 性能及调优指南》3.1 确认瓶颈
    马哥Linux base学习笔记
    《Linux 性能及调优指南》1.6 了解Linux性能指标
    Linux性能及调优指南1.2之Linux内存架构
    《Linux 性能及调优指南》1.1 Linux进程管理
    分布式系统的Raft算法
    《马哥出品高薪linux运维教程》wingkeung学习笔记-linux基础入门课程
    Systemd 入门教程:实战篇
  • 原文地址:https://www.cnblogs.com/javaxiaodoufu/p/7461869.html
Copyright © 2011-2022 走看看