jquery ajax 分页2

/*
* 分页   $("#divPager").flexipager
*  2015.03.17
*/

//初始化列表默认属性
(function($) {
    $.addFlex = function(t, p) {
        if (t.pager) return false;   // 若已经存在Pager - DIV 对象则return
        p = $.extend({
            url: false,             // 获取数据源对应的url地址
            async: true,            // 默认异步加载(false=同步)
            method: ‘POST‘,         // 数据发送方式
            dataType: ‘json‘,       // 数据加载的类型,json
            page: 1,                // 当前页
            newp: 1,                // 默认当前页
            total: 1,               // 总页面数
            rp: 2,                 // 每页默认的结果数
            sortname: "",           // 排序字段
            sortorder: "",          // asc desc
            primaryKey: "",         // 主键字段名
            coloursEvent: ""     // 界面渲染
        }, p);

        $(t).show().attr({ cellPadding: 0, cellSpacing: 0, border: 0 }).removeAttr(‘width‘);

        var g = {
            //分页
            buildpager: function() {
                //                g.pDiv = document.createElement(‘div‘);
                //                g.pDiv.innerHTML = ‘<div class="pDiv2"></div>‘;

                //                alert($(g.pDiv).html());
                //                alert($(this.pDiv).html());

            var html = "<span class=‘pFirst‘>首页</span>&nbsp;<span class=‘pPrev‘>上一页</span>&nbsp;<span class=‘pPageStatr‘>1</span>/<span class=‘pTotal‘>1</span>&nbsp;<span class=‘pNext‘>下一页</span>&nbsp;<span class=‘pLast‘>尾页</span>&nbsp;&nbsp;&nbsp;";
                html += "<span>共&nbsp;</span><span class=‘rTotal‘>0</span><span>&nbsp;条记录</span> ";

                $(t).append(html);

                $(‘.pFirst‘, t).click(function() { g.changePage(‘first‘) });
                $(‘.pPrev‘, t).click(function() { g.changePage(‘prev‘) });
                $(‘.pNext‘, t).click(function() { g.changePage(‘next‘) });
                $(‘.pLast‘, t).click(function() { g.changePage(‘last‘) });
                this.populate();
            },
            //获取数据
            populate: function() {

                if (p.page > p.pages)
                    p.page = p.pages;

                var param = [
                      { name: ‘page‘, value: p.newp }
                    , { name: ‘rp‘, value: p.rp }
                    , { name: ‘sortname‘, value: p.sortname }
                    , { name: ‘sortorder‘, value: p.sortorder }
                    , { name: ‘primaryKey‘, value: p.primaryKey }

                ];

                $.ajax({
                    type: p.method,
                    url: p.url,
                    async: p.async,
                    data: param,
                    success: function(data) {
                        data = "[" + data + "]";
                        var page = eval(data)[0].page;
                        var total = eval(data)[0].total;
                        var json = eval(data)[0].rows;

                        p.pages = Math.ceil(parseInt(total) / 2);

                        $(".pTotal", t).html(p.pages); //页数
                        $(".rTotal", t).html(total); //总记录
                        $(".pPageStatr", t).html(p.page);  //当前页

                        //alert(json);
                        if (p.coloursEvent)
                            p.coloursEvent(json);

                    },
                    error: function(data) {
                        alert("error:");
                        try {
                        } catch (e) { alert("error:"); }
                    }
                });
            },

            //翻页
            changePage: function(ctype) {
                //alert(ctype);
                switch (ctype) {
                    case ‘first‘:
                        //p.page = p.newp = 1;
                        p.newp = 1;
                        break;
                    case ‘prev‘:
                        if (p.page > 1)
                            p.newp = parseInt(p.page) - 1;
                        break;
                    case ‘next‘:
                        if (p.page < p.pages)
                            p.newp = parseInt(p.page) + 1;
                        break;
                    case ‘last‘:
                        p.newp = p.pages;
                        break;
                }

                if (p.newp == p.page)
                    return false;

                p.page = p.newp;

                this.populate();
            }
        };

        g.buildpager();
        t.p = p;
        t.pager = g;
        if (p.url && p.autoload) {
            g.populate();
        }
        return t;
    };

    var docloaded = false; //文档加载完毕标识
    $(document).ready(function() { docloaded = true });
    var urlString = document.location.pathname; //当前页面的url
    var huayingPageRpNum = urlString + "-huayingPageRpNum"; //设置当前页面的分页条数

    //构造函数
    $.fn.flexipager = function(p) {
        return this.each(function() {
            if (!docloaded) {
                $(this).hide();
                var t = this;
                $(document).ready(function() { $.addFlex(t, p); });
            } else {
                $.addFlex(this, p);
            }
        });
    };

})(jQuery);
var hyajax =
{
    eventAjax: function() {

    },
    executeAjax: function(requestType) {
        var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        xmlhttp.onreadystatechange = hyajax.eventAjax
        xmlhttp.open("")
    }
}
    <script src="ETOS_Js/Plugin/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="ETOS_Js/JsPager/JsPager.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            $("#divPager").flexipager({
                url: "/Handlers/Topics.ashx?Action=Get_AnswerList",
                sortname: "createTime",
                sortorder: "desc",
                coloursEvent: addData
            });

        });

        function addData(json) {
            alert(json + " 3234");//返回一个json数据 在进行解析数据
        }

    </script>
时间: 2024-08-29 01:51:04

jquery ajax 分页2的相关文章

jquery ajax分页插件特效源代码demo完整版

原文:jquery ajax分页插件特效源代码demo完整版 源代码下载地址:http://www.zuidaima.com/share/1550463586798592.htm 网上找的,原版本没有测试数据和建表脚本啥的,我给加上了.

Pagination jquery ajax 分页参考资料

http://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%E4%B8%AD%E6%96%87%E8%AF%A6%E8%A7%A3/ 个人博客参考 中文项目地址:http://www.zhangxinxu.com/jq/pagination_zh/ 原项目地址:http://plugins.jquery.com/project/pagination 版

jquery ajax 分页

<script src="../Js/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#pages").val(Math.ceil(50 / 10)); }); //翻页 function

jquery+ajax分页

先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes 二.前台页面代码: <head runat="server"> <title>JQuery无刷新分页</title> <link href="Styles/co

laravel5.6中jquery+ajax分页

public function shows(Request $request){ $p=$request->get("page"); $page=empty($p)?1:$p; $count=DB::table("shop")->count(); $length = 4; $num_page = ceil($count/$length); $limit = ($page-1)*$length; $data=DB::select("select

asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs" Inherits="renmai_PageTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

jQuery、Ajax分页

1.效果图预览 2.HTML代码 <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <table class="table table-striped table-hover table-bordered bootstrap-datatable " id="TemplateTable"> <

[原创]jquery+css3打造一款ajax分页插件

最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是帮我们取代js中这部分动画代码的使js更纯粹地去实现逻辑 效果图如下: 调用代码如下: 包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便 <script type="text/javascript"> var kpag