详解angularjs结合pagination插件实现分页功能

2024-12-01 11:04:33

angularjs与pagination插件可以完美实现前端的分页，筛选，搜索等功能，前提当然需要有后台开发配合，今天我们只说前端实现：

1、引入pagination插件，在angularjs引入之前先加载pagination插件；

2、在定义controller的时候，需要注入pagination插件；

3、分页前端原理基本需要有个默认异步请求，当点击分页，再次请求数据并向后台发送当前页码，如果有搜索数据或者筛选数据功能，在发送请求的同时需要带上与后台开发共同定义的搜索参数；

4、废话不多上，上代码，基本模板：

var url = '请求路径';

  $http({
    method:"post",
    url:url
  }).success(function(_data) {
    $scope.contentlist = _.data.items;//数据列表
        $scope.pageparameters = _data.data;
    $scope.Searchparameters = {
        //定义你的搜索参数
    }
    // 初始化分页数据
    var pagination;
    $scope.paginationInt = function($data) {
      pagination = $scope.pagination = Pagination.create({

        itemsCount: $data.total_items, // 总数
        itemsPerPage: $data.epage, // 每页条数
        currentPage: $data.page // 当前页码
      });

      // 分页操作
      pagination.onChange = function(page) {
        $scope.page(page);
      };
    };
    $scope.paginationInt($scope.pageparameters);
    // 筛选过滤列表页时传递的参数
    $scope.borrowSearch = function(type, val) {
      $scope.borrowData[type] = val;
      $scope.page(1);//每次搜索都从第一页开始
    };
    // 排序
    $scope.SearchTab = {};
    $scope.SearchStatus = true;
    $scope.current = {
      //你的参数
    };
    // 页码跳转操作
    $scope.skipInput = function(page, endPage) {
      if (!isNaN(page)) {
        var page = parseInt(page, 20),
          endPage = parseInt(endPage, 20);
        if (page > endPage || page <= 0) {
          $scope.skipError = true;
        } else {
          $scope.skipError = false;
        }
      } else {
        $scope.skipError = true;
      }
    };

    $scope.page = function(page) {
      $scope.Searchparameters.current_page = page;

// 分页方法
$http({ url:url, method:"post", params:$scope.Searchparameters }).success(function(data) { $scope.contentlist = data.items; }); }; });

HTML方法在此略过，不明白的小伙伴可以私信！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Angularjs 实现分页功能及示例代码

基于Angularjs实现分页前言学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和使用说明 1.插件源码主要
AngularJs实现分页功能不带省略号的代码

angularJs 的分页重点体现在对过滤器的使用.这个过滤器也并不复杂. 首先上 html 代码: <!DOCTYPE html> <html ng-app="demoApp"> <head> <meta charset="utf-"> <meta name="viewport" content="width=device-width"> <title&g
对比分析Django的Q查询及AngularJS的Datatables分页插件

使用Q查询,首先要导入Q模块: from django.db.models import Q 可以组合使用&,|操作符用于多个Q的对象,产生一个新的Q对象,Q对象也可以用~操作符放在前面表示否定,如下例所示: if search: keywords_list = search.split(' ') query_list = [Q(status__icontains=get_success_fail_status(keyword)) if get_success_fail_keyword_stat
基于Angularjs实现分页功能

前言学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和使用说明 1.插件源码主要基于angular direct
angularjs表格分页功能详解

接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""
Angularjs实现分页和分页算法的示例代码

对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示. 页面展示效果: 页面HTML代码: <table class="table table-striped" style="margin: 0px;"> <thead> <tr> <td>选择</td> <td>企业名称</td&g
AngularJS实现分页显示数据库信息

接着第一篇<>AngularJS内建服务$location及其功能详解>,进行学习 Section 2:实现分页显示效果那么再隐身一下,通过location的setter方法设置当前的url信息.在这里为了能够让演示看到更好的效果,在这个比较完整的实例中,我引入了angularJS的多路由技术.嵌套的控制器之间传递数据.scope的继承. http通信.内链接传递变量等. 首先建立一个首页模板 <!DOCTYPE html> <html ng-app="tu
AngularJS 与Bootstrap实现表格分页实例代码

AngularJS 从开始发布到现在使用的开发的者越来越多,也表明大多数做前端的朋友在往这边转,毕竟是Google 公司出品的产品啊,所以最近自己也在学习这部分知识. AngularJS Bootstrap实现表格分页: 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后
学习Angularjs分页指令

在项目中许多页面都用到了分页,然后每个页面都有许多重复的分页代码,于是自己写了一份简易的分页指令,简化页面的代码,且容易维护,写在博客中当做备份,方便以后查阅. 以下是定义指令及其应用的步骤: 1.指令定义定义一个js文件,page-directive.js,用来写分页的指令代码,这个文件中包含了分页的模板,以下是js文件中的所有代码: 'use strict'; (function () { angular.module('template/pageInit/pageInit.html',
ANGULARJS中使用JQUERY分页控件

首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨. 分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用.接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法. 首先在web项目中引用jquery1.10.Angularjs库文件以及jq-pagination控件. 我降指令名称为custompagination,为指令添加Html样式. 然后给指令添加对应的控
angularjs使用directive实现分页组件的示例

闲来没事,分享下项目中自己写的分页组件.来不及了,直接上车. 效果: 输入框可任意输入,并会自动提交到该页依赖项: fontawesome,bootstrap html: <ul class="page clearfix"> <li ng-hide="currentPage <= 1"> <a href="" ng-click=" rel="external nofollow"

详解angularjs结合pagination插件实现分页功能

相关推荐

随机推荐