javascript 将 ThinkPHP 分页自动转换为 bootstrap 分页

#写的一个通用的,将thinkphp生成的分页HTML,自动转换为 bootstrap 分页:

/**
 * @author default7#zbphp.com
 * @description 将ThinkPHP的分页转换为 bootstrap分页
 * @param selector
 */
function initPagination(selector) {
    selector = selector || '.page';
    $(selector).each(function (i, o) {
        var html = '<ul class="pagination">';
        $(o).find('a,span').each(function (i2, o2) {
            var linkHtml = '';
            if ($(o2).is('a')) {
                linkHtml = '<a href="' + ($(o2).attr('href') || '#') + '">' + $(o2).text() + '</a>';
            } else if ($(o2).is('span')) {
                linkHtml = '<a>' + $(o2).text() + '</a>';
            }

            var css = '';
            if ($(o2).hasClass('current')) {
                css = ' class="active" ';
            }

            html += '<li' + css + '>' + linkHtml + '</li>';
        });

        html += '</ul>';
        $(o).html(html).fadeIn();
    });
}

时间: 2024-08-25 02:42:40

javascript 将 ThinkPHP 分页自动转换为 bootstrap 分页的相关文章

bootstrap分页及弹框

一.bootstrap分页 1,js内容 var pageitem = 20;//每页显示数 //是否是第一次加载js var isfirstload = true; function initPagination(count){ var num_entries = 0;//总数 if(null== count){ num_entries = $("#count").val(); if(null== num_entries){ num_entries = 0; }else{ total

bootstrap 分页

1.背景: 前端页面使用bootstrap分页,同时与搜索条件联动: 2. jsp页面由服务端返回后, 异步请求动态创建表格, 分页的数据由服务端第一次返回后初始化, 以后每次异步请求再更新. jsp代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c&

Bootstrap分页插件ajax返回数据,工具类的编写

使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href="css/bootstrap-table.min.css" rel="stylesheet" /> 需要引入的js: 1 <!-- boostrap table --> 2 <script type="text/javascript&quo

bootstrap分页插件 用jquery

要引用bootstrap.css,jquery.js,jquery.twbsPagination.js 效果图如下: 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

bootstrap分页与翻页

bootstrap分页在ul中添加pagination可显示如下效果: bootstrap翻页在ul中添加pager类可显示如下效果: 结合分页与翻页可显示如下效果: 因此,需要3个块元素xian显示在同一列,解决办法: 为第一个和最后一个ul设置float分别为left和right 代码如下: 1 <div class="col-sm-offset-4 col-sm-3"> 2 <ul id="previous" class="page

CI 结合Bootstrap 分页

#显示列表 public function index(){ //载入分页类 $this->load->library('pagination'); //每页显示的条数 $perPage=11; /****配置分页****/ //设置分页路径 $config['base_url']=site_url('admin/locality/index'); //获取总条数 $config['total_rows']=$this->db->count_all_results('goods')

thinkPHP -- 用户名验证、数据分页

用户名验证:  用Ajax 和 js html中 Ajax 将输入框中的值 传入PHP文件, 和数据库中的值进行匹配,用Ajax的回调将结果回调到html文件中, html再用js改变提示信息 //blur鼠标离开时的方法jq方法 //jq获取用户名输入框的标签 $('#name').blur() html文件中 获取input内容 $(this).attr('value'); // 获取某个元素的属性值 头尾分离 文档:8.7包含文件 <include file="header"

[小技巧]让你的GridView支持IQueryable,并自动实现真分页

众所周知,asp.net自带的GridView在自带分页方面设计得很2,因为它是假分页,即内存分页.而且它不智能支持强大的Iqueryable. 但这表明微软忽略了现实中的分页需求吗?答案应该不是,我想也不是. 那么,通过什么方式可以达到真分页的效果呢?使用Asp.Net自带的3种DataSource(objectdatasource, entitydatasource, linqdatasource). 三种datasource各有所长. 但这样做还是有些麻烦呀…… 朋友有一个项目,之前数据少

mybatis常用分页插件,快速分页处理

在未分享整个查询分页的执行代码之前,先了解一下执行流程. 1.总体上是利用mybatis的插件拦截器,在sql执行之前拦截,为查询语句加上limit X X 2.用一个Page对象,贯穿整个执行流程,这个Page对象需要用java编写前端分页组件 3.用一套比较完整的三层entity,dao,service支持这个分页架构 4.这个分页用到的一些辅助类 注:分享的内容较多,这边的话我就不把需要的jar一一列举,大家使用这个分页功能的时候缺少什么就去晚上找什么jar包即可,尽可能用maven包导入