精华内容
下载资源
问答
  • 分页组件

    2020-12-09 04:16:34
    <div><p>公司业务所需的分页组件</p><p>该提问来源于开源项目:mipengine/mip-extensions</p></div>
  • vue 分页组件 网页 (vue-lpage) Low-level Vue pagination component 低级Vue分页组件 This is a low-level, ui-agnostic pagination component. 这是一个底层的,与用户界面无关的分页组件。 You pass it an ...

    vue 分页组件

    网页 (vue-lpage)

    Low-level Vue pagination component

    低级Vue分页组件

    This is a low-level, ui-agnostic pagination component.

    这是一个底层的,与用户界面无关的分页组件。

    You pass it an array of data, the current page index and the desired amount of results per page.

    您向其传递数据数组,当前页面索引以及每页所需的结果量。

    It then exposes a scoped slot through which you can access the following:

    然后,它公开了一个有作用域的插槽,您可以通过该插槽访问以下内容:

    • subset: the subset of data corresponding to the current page.

      子集 :与当前页面相对应的数据子集。

    • totalPages: the total amount of pages.

      totalPages :页面总数。

    • isFirstPage: whether the current page is the first one.

      isFirstPage :当前页面是否为第一页。

    • isLastPage: whether the current page is the last one.

      isLastPage :当前页面是否为最后一页。

    Recommended usage: wrap this in a high-level styled component.

    推荐用法:将其包装在高级样式的组件中。

    安装 (Installation)

    npm install --save vue-lpage

    例子 (Examples)

    <!-- This will render [ "a", "b" ] -->
    <template>
        <vue-lpage :data="['a', 'b', 'c']" :page="1" :results-per-page="2">
          <div slot-scope="{subset}">
            {{ subset }}
          </div>
        </vue-lpage>
    </template>
    
    <script>
    import VueLpage from 'vue-lpage';
    export default {
      components: {
        VueLpage
      }
    };
    </script>
    <template>
        <vue-lpage :data="data" :page="page" :results-per-page="resultsPerPage">
          <div slot-scope="{subset, totalPages, isFirstPage, isLastPage}">
            <div>
                Page <input type="number" v-model="page" :min="1" :max="totalPages"> out of {{ totalPages }}
            </div>
            <div>
                Show <input type="number" v-model="resultsPerPage" :min="1" :max="data.length"> results per page
            </div>
            <button :disabled="isFirstPage" @click="page--">
                Previous
            </button>
            <button :disabled="isLastPage" @click="page++">
                Next
            </button>
            <ul><li v-for="quote in subset" :key="quote">{{ quote }}</li></ul>
          </div>
        </vue-lpage>
    </template>

    笔记 (Notes)

    Pagination is one-based (page 1 is the first page).

    分页是基于一个的(第一页是第一页)。

    道具 (Props)

    • data: the array of data to paginate.

      data :要分页的数据数组。

    • page: the page to display.

      page :要显示的页面。

    • results-per-page: the maximum amount of results to display per page.

      每页结果数:每页显示的最大结果数。

    插槽范围 (Slot scope)

    • subset: the subset of data corresponding to the current page.

      子集 :与当前页面相对应的数据子集。

    • totalPages: the total amount of pages.

      totalPages :页面总数。

    • isFirstPage: whether the current page is the first one.

      isFirstPage :当前页面是否为第一页。

    • isLastPage: whether the current page is the last one.

      isLastPage :当前页面是否为最后一页。

    供电 (Powered by)

    • Babel

      巴别塔

    • Webpack 4

      Webpack 4

    翻译自: https://vuejsexamples.com/low-level-vue-pagination-component/

    vue 分页组件

    展开全文
  • Angular分页组件

    2019-02-26 15:16:28
    Angular自定义一个分页组件; 替代angular material提供的分页组件; 可根据个人需求做适当的修改;
  • jQuery分页组件

    2019-04-18 15:45:57
    jquery分页组件,快速实现分页效果,使用该组件需导入jQuery,且jQuery须在该组件之前导入
  • vue 分页组件 vue-ads分页 (vue-ads-pagination) Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items. On the right side you can select a ...

    vue 分页组件

    vue-ads分页 (vue-ads-pagination)

    Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items. On the right side you can select a specific, the first, last, next or previous page.

    Vue广告分页是vue js分页组件。 在左侧,您可以找到有关所示项目的一些信息。 在右侧,您可以选择特定页面,第一页,最后一页,下一页或上一页。

    All the components can be overriden by your own components, or you can add your own styles to the default components.

    您可以使用自己的组件覆盖所有组件,也可以将自己的样式添加到默认组件。

    安装 (Installation)

    You can install the package via npm or yarn.

    您可以通过npm或yarn安装软件包。

    NPM (NPM)

    npm install vue-ads-pagination --save

    npm install vue-ads-pagination --save

    (YARN)

    yarn add vue-ads-pagination

    yarn add vue-ads-pagination

    用法 (Usage)

    You can add the vue-ads-pagination component by using the following code in your project.

    您可以通过在项目中使用以下代码来添加vue-ads-pagination组件。

    <template>
        <div id="app">
            <vue-ads-pagination
                :total-items="200"
                :max-visible-pages="5"
                :page="page"
                :loading="loading"
                @page-change="pageChange"
                @range-change="rangeChange"
            >
                <template slot-scope="props">
                    <div class="vue-ads-pr-2 vue-ads-leading-loose">
                        Items {{ props.start }} tot {{ props.end }} van de {{ props.total }}
                    </div>
                </template>
                <template
                    slot="buttons"
                    slot-scope="props"
                >
                    <vue-ads-page-button
                        v-for="(button, key) in props.buttons"
                        :key="key"
                        v-bind="button"
                        @page-change="page = button.page"
                    />
                </template>
            </vue-ads-pagination>
        </div>
    </template>
    
    <script>
    import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
    import '../node_modules/vue-ads-pagination/dist/vue-ads-pagination.css';
    
    import VueAdsPagination, { VueAdsPageButton } from 'vue-ads-pagination';
    
    export default {
        name: 'App',
        
        components: {
            VueAdsPagination,
            VueAdsPageButton,
        },
    
        data () {
            return {
                loading: false,
                page: 5,
            };
        },
    
        methods: {
            pageChange (page) {
                this.page = page;
                console.log(page);
            },
            
            rangeChange (start, end) {
                console.log(start, end);
            },
        },
    };
    </script>

    组件 (Components)

    VueAds分页 (VueAdsPagination)

    物产 (Properties)
    • page: (type: number, default: 0) A zero-based number to set the page.

      page :( 类型:数字,默认值:0)从零开始的数字,用于设置页面。


      Be aware you need to update the page property by the result of the page-change action!
      请注意,您需要通过页面更改操作的结果来更新页面属性!

    • items-per-page: (type: number, default: 10) The maximum amount of items on one page.

      items-per-page :( 类型:数字,默认值:10)一页上的最大项目数。

    • max-visible-pages: (type: number, default: 5) The maximum number of pages to be visible if their are too many pages.

      max-visible-pages :( 类型:数字,默认值:5)如果页面太多,则可见的最大页面数。

    • total-items: (type: number, required) The total amount of items.

      total-items :( 类型:数字,必填)项目总数。

    • loading: (type: boolean, default: false) Indicates if the current page is loading.

      loading :( 类型:布尔值,默认值:false)指示当前页面是否正在加载。

    大事记 (Events)
    • page-change: Emitted on creation, to know the initial state, and if another page is clicked. It contains the following parameters:

      page-change :在创建时发出的信息,用于了解初始状态以及是否单击了另一个页面。 它包含以下参数:

      • page: page :( (type: number) The zero-based current page.类型:数字)从零开始的当前页面。
    • range-change: Emitted on creation, to know the initial state, and if another page is clicked or the total items change and you're on the last page. It contains the following parameters:

      range-change :创建时发出的信息,用于了解初始状态,以及是否单击了另一页或总项目是否更改,而您位于最后一页。 它包含以下参数:

      • start: start(type: number) A zero-based number to identify the first item.(type:number)从零开始的数字,用于标识第一项。
      • end: end :( (type: number) A zero-based number to identify the last item.类型:数字)从零开始的数字,用于标识最后一个项目。
    范本 (Templates)
    默认 (Default)

    You can add a default template to use a custom pagination detail box. The scope contains 3 variables:

    您可以添加默认模板以使用自定义分页详细信息框。 范围包含3个变量:

    • start: (type: number) The included start item.

      start :( 类型:数字)包含的开始项。

    • end: (type: number) The included end item.

      end :( 类型:数字)包含的最终项目。

    • total: (type: number) The total number of visible items.

      total :( 类型:数字)可见项的总数。

    <template slot-scope="props">
        {{ props.start }} - {{ props.end }} : Total {{ props.total }}
    </template>
    纽扣 (Buttons)

    If you want to use your own buttons, control their behaviour our style them in a different way. You can create your own button component and loop over it in this slot or use the predefined VueAdsPageButton. This is a scoped slot that contains an array of buttons.

    如果您想使用自己的按钮,请以其他方式控制它们的行为,并为我们设置样式。 您可以创建自己的按钮组件,并在此插槽中对其进行循环,也可以使用预定义的VueAdsPageButton。 这是一个包含按钮阵列的作用域插槽。

    • buttons: (type: Array) A list of all buttons currently used. One button is an object that contains the following attributes:

      buttons :( 类型:数组)当前使用的所有按钮的列表。 一个按钮是一个包含以下属性的对象:

      • page: page :( (type: number||string) This is the zero based page or the string '...'.类型:数字||字符串)这是从零开始的页面或字符串“ ...”。
        Note that the value of this attribute for the next and previous icons is calculated by the current page.
        请注意,下一个和上一个图标的此属性的值由当前页面计算。
        If the current page is 2, the previous page will be 1 and the next page is 3.
        如果当前页面为2,则上一页为1,下一页为3。
      • active: active(type: boolean) Is the current page active?(type:boolean)当前页面是否处于活动状态?
      • disabled: disabled(type: boolean) Is the current button disabled?(type:boolean)当前按钮是否被禁用?
      • html: html :( (type: string) This string is shown in the button. So you can use icons for the previous and next button.类型:字符串)此字符串显示在按钮中。 因此,您可以将图标用于上一个和下一个按钮。
      • title: title :( (type: string) If you want to add a title to the button, you can fill this attribute.类型:字符串)如果要向按钮添加标题,则可以填充此属性。
      • loading: loading :( (type: boolean) Indicates if the button has to show a loading icon.类型:布尔值)指示按钮是否必须显示加载图标。
    <template
        slot="buttons"
        slot-scope="props"
    >
        <vue-ads-page-button
            v-for="(button, key) in props.buttons"
            :key="key"
            v-bind="button"
            @page-change="page = button.page"
        />
    </template>

    VueAdsPageButton (VueAdsPageButton)

    This is the default button. If you want to add extra classes. Add the template above and add the class attribute.

    这是默认按钮。 如果要添加额外的类。 在上面添加模板并添加class属性。

    物产 (Properties)
    • page: (type: number||string, default: 0) A zero-based number that represents the page or '...'.

      page :( 类型:数字||字符串,默认值:0)从零开始的数字,表示页面或'...'。

    • active: (type: boolean, default: false) Is the current button active?

      active :( 类型:布尔值,默认值:false)当前按钮是否处于活动状态?

    • disabled: (type: boolean, default: false) Is the current button disabled?

      disabled :( 类型:布尔值,默认值:false)当前按钮是否被禁用?

    • html: (type: string, required) This string is shown in the button.

      html :( 类型:字符串,必填)此字符串显示在按钮中。

    • title: (type: string, default: '') If you want to add a title to the button, you can fill this attribute.

      title :( 类型:字符串,默认值:'')如果要向按钮添加标题,则可以填充此属性。

    • loading: (type: boolean, default: false) Indicates if the button has to show a loading icon.

      loading :( 类型:布尔值,默认值:false)指示按钮是否必须显示加载图标。

    • disable-styling: (type: boolean, default: false) Remove all styling classes.

      disable-styling :( 类型:布尔值,默认值:false)删除所有样式类。

    大事记 (Events)
    • page-change: Emitted when the button is clicked.

      page-change :单击按钮时发出。

    测试中 (Testing)

    We use the jest framework for testing this pagination component. Run the following command to test it:

    我们使用jest框架来测试此分页组件。 运行以下命令进行测试:

    npm run test:unit

    翻译自: https://vuejsexamples.com/vue-ads-pagination-is-a-vue-js-pagination-component/

    vue 分页组件

    展开全文
  • ajax 分页组件

    2012-05-30 14:40:03
    ajax 分页组件 ajax 分页组件ajax 分页组件ajax 分页组件
  • drf偏移分页组件 pahenations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOffsetPagination(LimitOffsetPagination): # ?offset=从头偏移的条数&limit=要显示的条数 limit...

    drf偏移分页组件

    pagenations.py
    from rest_framework.pagination import LimitOffsetPagination
    class MyLimitOffsetPagination(LimitOffsetPagination):
        # ?offset=从头偏移的条数&limit=要显示的条数
        # offset就是偏移数
        limit_query_param = 'limit'
        offset_query_param = 'offset'
        # ?不传offset和limit默认显示前3条,只设置offset就是从偏移位往后再显示3条
        default_limit = 3
        # ?limit可以自定义一页显示的最大条数
        max_limit = 5
    
        # 只使用limit结合ordering可以实现排行前几或后几
        # ?ordering=-price&limit=2  => 价格前2
    
    views.py
    from rest_framework.generics import ListAPIView
    
    class CarListAPIView(ListAPIView):
        # 如果queryset没有过滤条件,就必须 .all(),不然分页会出问题
        queryset = models.Car.objects.all()
        serializer_class = serializers.CarModelSerializer
        
        # 分页组件 - 给视图类配置分页类即可 - 分页类需要自定义,继承drf提供的分页类即可
        pagination_class = pagenations.MyLimitOffsetPagination
    

    drf游标分页组件

    pagenations.py
    # 注:必须基于排序规则下进行分页,比如已经有排序规则的ordering
    # 1)如果接口配置了OrderingFilter过滤器,那么url中必须传ordering
    # 1)如果接口没有配置OrderingFilter过滤器,一定要在分页(views.py)类中声明ordering按某个字段进行默认排序
    from rest_framework.pagination import CursorPagination
    class MyCursorPagination(CursorPagination):
    	# 系统自动生成,不需要我们管,生成的是一堆乱七八糟的字符
        cursor_query_param = 'cursor'
        # 一页中显示的条数
        page_size = 3
        # 用户可以限制有多少条数
        page_size_query_param = 'page_size'
        max_page_size = 5
        # 默认配置
        ordering = '-pk'
    
    views.py
    from rest_framework.generics import ListAPIView
    
    class CarListAPIView(ListAPIView):
        # 如果queryset没有过滤条件,就必须 .all(),不然分页会出问题
        queryset = models.Car.objects.all()
        serializer_class = serializers.CarModelSerializer
        
        # 分页组件 - 给视图类配置分页类即可 - 分页类需要自定义,继承drf提供的分页类即可
        pagination_class = pagenations.MyCursorPagination
    

    自定义过滤器

    filters.py
    # 自定义过滤器,接口:?limit=显示的条数
    class LimitFilter:
        def filter_queryset(self, request, queryset, view):
            # 前台固定用 ?limit=... 传递过滤参数
            limit = request.query_params.get('limit')
            # 如果limit有值
            if limit:
            	# 强制转换
                limit = int(limit)
                return queryset[:limit]
            # 不做任何处理,原路返回
            return queryset
    
    views.py
    from rest_framework.generics import ListAPIView
    
    class CarListAPIView(ListAPIView):
        # 如果queryset没有过滤条件,就必须 .all(),不然分页会出问题
        queryset = models.Car.objects.all()
        serializer_class = serializers.CarModelSerializer
        
        # 局部配置 过滤类 们(全局配置用DEFAULT_FILTER_BACKENDS)
        filter_backends = [LimitFilter]
    
    

    过滤器插件:django-filter

    安装
    >: pip3 install django-filter
    
    过滤条件层:自定义api/filters.py
    # django-filter插件过滤器类
    from django_filters.rest_framework.filterset import FilterSet
    from . import models
    
    # 自定义过滤字段
    from django_filters import filters
    class CarFilterSet(FilterSet):
        min_price = filters.NumberFilter(field_name='price', lookup_expr='gte')
        max_price = filters.NumberFilter(field_name='price', lookup_expr='lte')
        class Meta:
            model = models.Car
            fields = ['brand', 'min_price', 'max_price']
            # brand是model中存在的字段,一般都是可以用于分组的字段
            # min_price、max_price是自定义字段,需要自己自定义过滤条件
    
    分类(视图层:views.py)
    # django-filter插件过滤器
    from django_filters.rest_framework import DjangoFilterBackend
    from .filters import CarFilterSet
    
    class CarListAPIView(ListAPIView):
        queryset = models.Car.objects.all()
        serializer_class = serializers.CarModelSerializer
        
        # 局部配置 过滤类 们(全局配置用DEFAULT_FILTER_BACKENDS)
        filter_backends = [DjangoFilterBackend]
        
        # django-filter过滤器插件使用
        filter_class = CarFilterSet
        # 接口:?brand=...&min_price=...&max_price=...
        # eg:?brand=宝马&min_price=5&max_price=10 => 5~10间的宝马牌汽车
        
        
    
    展开全文
  • vue 分页组件 Vue-Plain分页 (vue-plain-pagination) A simple pagination component for Vue. Vue的简单分页组件。 依存关系 (Dependencies) Vue.js 2 - progressive JavaScript framework Vue.js 2-渐进式...

    vue 分页组件

    Vue-Plain分页 (vue-plain-pagination)

    A simple pagination component for Vue.

    Vue的简单分页组件。

    依存关系 (Dependencies)

    Vue.js 2 - progressive JavaScript framework

    Vue.js 2-渐进式JavaScript框架

    安装 (Installation)

    通过纱线 (via Yarn)
    yarn add vue-plain-pagination
    通过NPM (via NPM)
    npm install vue-plain-pagination
    通过CDN (via CDN)
    <script src="//unpkg.com/[email protected]"></script>
    

    用法 (Usage)

    基本的 (Basic)

    在安装Yarn / NPM之后 (after Yarn/NPM installation)
    <template>
      <div>
        <p>Current page: {{ currentPage }}</p>
        <v-pagination v-model="currentPage" :page-count="30"></v-pagination>
      </div>
    </template>
    
    <script>
    import vPagination from 'vue-plain-pagination'
    
    export default {
      components: { vPagination },
      data() {
        return {
          currentPage: 1
        }
      }
    }
    </script>
    通过CDN (via CDN)
    <!doctype html>
    <html lang="en">
    <head>
        <title>vue-plain-pagination</title>
    </head>
    <body>
    <div id="app">
        <p>page: {{ currentPage }}</p>
        <v-pagination v-model="currentPage" :page-count="total"></v-pagination>
    </div>
    
    <script src="//unpkg.com/vue"></script>
    <script src="//unpkg.com/vue-plain-pagination"></script>
    <script>
      Vue.component('v-pagination', window['vue-plain-pagination'])
    
      new Vue({
        el: '#app',
        data: {
          currentPage: 5,
          total: 9,
        },
      })
    </script>
    </body>
    </html>

    客制化 (Customization)

    Using classes and labels you can change default CSS class names of every HTML tag of pagination and anchor from first/prev/next/last buttons.

    使用classeslabels您可以从第一个/上一个/下一个/最后一个按钮更改每个分页和锚定 HTML标签的默认CSS类名称。

    <template>
      <div>
        <p>Current page: {{ currentPage }}</p>
        <v-pagination v-model="currentPage"
                      :page-count="totalPages"
                      :classes="bootstrapPaginationClasses"
                      :labels="paginationAnchorTexts"></v-pagination>
      </div>
    </template>
    
    <script>
    import vPagination from 'vue-plain-pagination'
    
    export default {
      components: { vPagination },
      data() {
        return {
          currentPage: 1,
          totalPages: 30,
          bootstrapPaginationClasses: {
            ul: 'pagination',
            li: 'page-item',
            liActive: 'active',
            liDisable: 'disabled',
            button: 'page-link'  
          },
          paginationAnchorTexts: {
            first: 'First',
            prev: 'Previous',
            next: 'Next',
            last: 'Last'
          }
        }
      }
    }
    </script>

    物产 (Properties)

    name type require
    v-model Number yes Current page.
    page-count Number yes Number of pages.
    classes Object no Class names of used HTML tag.
    labels Object no HTML/text of prev/next button.
    名称 类型 要求
    v-model 当前页面。
    page-count 页数。
    classes 目的 没有 使用HTML标签的类名。
    labels 目的 没有 上一页/下一页按钮HTML /文本。

    Default value of classes:

    classes默认值:

    {
       ul: 'pagination',
       li: 'pagination-item',
       liActive: 'pagination-item--active',
       liDisable: 'pagination-item--disable',
       button: 'pagination-link',
       buttonActive: 'pagination-link--active',
       buttonDisable: 'pagination-link--disable'
    }

    Default value of labels:

    labels默认值:

    {
       first: '&laquo;',
       prev: '&lsaquo;',
       next: '&rsaquo;',
       last: '&raquo;'
    }

    通过纱线 (via Yarn)

    # install dependencies
    yarn install
    
    # compiles and hot-reloads for development
    yarn run serve
    
    # compiles bundle for production
    yarn run build-lib
    
    # lints and fixes files
    yarn run lint

    通过NPM (via NPM)

    # install dependencies
    npm install
    
    # compiles and hot-reloads for development
    npm run serve
    
    # compiles bundle for production
    npm run build-lib
    
    # lints and fixes files
    npm run lint

    翻译自: https://vuejsexamples.com/pagination-component-for-vue-js-2/

    vue 分页组件

    展开全文
  • vue 分页组件 简单分页 (simple-pagination) Vue.js component for simple pagination. 用于简单分页的Vue.js组件。 关于 (About) It takes the number of pages (pages), current page (currentpage) and a ...
  • vue 分页组件 vue-ads分页 (vue-ads-pagination) Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items. Vue广告分页是vue js分页组件。 在...
  • 原生js+ajax分页组件

    2021-01-21 11:09:28
    本文实例为大家分享了js+ajax分页组件的具体代码,供大家参考,具体内容如下 1.定义分页组件DOM <div id=pagination class=pagination></div> 2.定义分页组件类及实例方法: // 分页组件类 function Pagination(_...
  • vue实现分页组件

    2020-10-17 14:03:44
    主要为大家详细介绍了vue实现分页组件的具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 分页组件bug

    2020-12-27 05:37:45
    <div><p>当分页组件items为11的时候: 不显示第一个页签,且激活页签样式也不显示。 当我修改items为12,就可以正常显示。 在其他页面将正确显示的分页组件items改为11,同样出现问题。 有...
  • 主要介绍了yii分页组件用法,结合实例形式较为详细的分析了yii分页组件的调用及具体的分页显示实现技巧,需要的朋友可以参考下
  • 自定义分页组件

    2019-06-01 21:31:17
    背景:django自带的分页组件不能很好的支持页码操作 实现:结合bootstrap自定义分页组件 组件: # 自定义分页组件 class SplitPage: ''' @:cur_page:当前页码 @:rouNum:数据总行数 @:perPage:每页显示的行数...
  • vue 分页组件 Vue分页2 (Vue Pagination 2) Note: This package is for use with Vuejs 2. 注意:此软件包适用于Vuejs 2。 Simple, generic and non-intrusive pagination component for Vue.js version 2. ...
  • JSP分页组件

    2013-06-18 09:49:23
    通用JSP分页组件 只要2分哦

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,084
精华内容 2,833
关键字:

分页组件