search
HomeWeb Front-endJS TutorialA brief discussion on native paging of DWZ table_jquery

DWZ’s native table paging is rarely used in project development recently, and third-party data binding table plug-ins such as jqgrid or grid are often used. Now if it is required in the project, you must use DWZ’s own table

Looking at a piece of code next, I will give you a detailed introduction to how to use table paging in DWZ. The following is how it is implemented in MVC.

?


Property Introduction

targetType: binding method, DWZ provides two methods: "navTab" and "dialog". As the name implies, it means whether the paging is on the tab page or on the pop-up layer

totalCount: total number of rows of data

numPerPage: number of data rows on the current page

pageNumShown:Total number of pages

currentPage: current page number

Copy code The code is as follows:

@using (Html.BeginForm("BidPrjList", " TbUnify", null, FormMethod.Post, new { id = "pagerForm" }))
{


}

Note that the paging form under DWZ must add id="pagerForm "property, otherwise it will not be executed. The essence of the paging of tables in DWZ is to pass the paging method to the backend in the form of form submission, and the backend receives the parameters and obtains the paging information: for example:

Copy code The code is as follows:

Request.Form["numPerPage"]

The value of getting the paging information form is the name of the hidden text field you define under the pagerForm form in View. After receiving it in the background, request the paging data from the data source, and then return to the front desk.

There is a small problem here: when you enter this page for the first time, the form submission event of the current paging cannot be triggered, so above I defined the dynamic assignment of ViewBag.numPerPage, how many pieces of data are divided into each page, and the front-end interface Just define the paging style, the actual data is not bound, so the paging information passed from the front desk must be used as the basis for background data paging, so that the front desk paging can be consistent with the data and will not cause confusion. This should be noted.

In the development of actual projects, we always put tables and filter conditions together. The way to pass in restriction conditions to the table in DWZ is also very simple. As above, add the hidden text field that needs to be passed in to the paging form, for example:

Copy code The code is as follows:



In this way, the incoming filter conditions can be accepted in the background.

The essence of DWZ’s table paging is to reload the data of the current tab page, causing the tab page to be refreshed. If restrictions are used together with paging, there will be a problem. After the page is reloaded, your filter conditions will be lost, and My solution here is to add a hidden text field to the paging form. Each time the filter condition is assigned a value, it will be judged in the background whether it is empty and whether to add the filter condition. I hope everyone can pay attention to this.

One final point, targetType was introduced above, indicating that the current paging method and paging are essentially the refresh of the tab page, so if we load the View layer containing the table as a partial page asynchronously, we will find that, The paging control of DWZ will not be displayed, so paging cannot be done. I have told you above that you need to specify the type for each paging. If you use $.load or @Html.Partial, you can only load the data of the first page. , this is also a flaw in DWZ. After all, the rise of DWZ has been in recent years, and there are still many problems and bugs, especially its table paging and data binding are really difficult to use, but in general, other components of DWZ are different from The style is still very good.

Okay, that’s it for today about DWZ table paging.

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
PHP开发:如何实现表格数据排序和分页功能PHP开发:如何实现表格数据排序和分页功能Sep 20, 2023 am 11:28 AM

PHP开发:如何实现表格数据排序和分页功能在进行Web开发中,处理大量数据是一项常见的任务。对于需要展示大量数据的表格,通常需要实现数据排序和分页功能,以提供良好的用户体验和优化系统性能。本文将介绍如何使用PHP实现表格数据的排序和分页功能,并给出具体的代码示例。排序功能实现在表格中实现排序功能,可以让用户根据不同的字段进行升序或降序排序。以下是一个实现表格

如何在CakePHP中创建自定义分页?如何在CakePHP中创建自定义分页?Jun 04, 2023 am 08:32 AM

CakePHP是一个强大的PHP框架,为开发人员提供了很多有用的工具和功能。其中之一是分页,它可以帮助我们将大量数据分成几页,从而简化浏览和操作。默认情况下,CakePHP提供了一些基本的分页方法,但有时你可能需要创建一些自定义的分页方法。这篇文章将向您展示如何在CakePHP中创建自定义分页。步骤1:创建自定义分页类首先,我们需要创建一个自定义分页类。这个

如何使用 JavaScript 实现表格分页功能?如何使用 JavaScript 实现表格分页功能?Oct 20, 2023 pm 06:19 PM

如何使用JavaScript实现表格分页功能?随着互联网的发展,越来越多的网站都会使用表格来展示数据。在一些数据量较大的情况下,需要将数据进行分页展示,以提升用户体验。本文将介绍如何使用JavaScript实现表格分页功能,并提供具体的代码示例。一、HTML结构首先,我们需要准备一个HTML结构来承载表格和分页按钮。我们可以使用<tab

Vue组件实战:分页组件开发Vue组件实战:分页组件开发Nov 24, 2023 am 08:56 AM

Vue组件实战:分页组件开发介绍在Web应用程序中,分页功能是必不可少的一个组件。一个好的分页组件应该展示简洁明了,功能丰富,而且易于集成和使用。在本文中,我们将介绍如何使用Vue.js框架来开发一个高度可定制化的分页组件。我们将通过代码示例来详细说明如何使用Vue组件开发。技术栈Vue.js2.xJavaScript(ES6)HTML5和CSS3开发环

使用JavaScript实现表格数据的分页显示使用JavaScript实现表格数据的分页显示Jun 16, 2023 am 10:00 AM

随着数据的不断增长,表格显示变得更加困难。大多数情况下,表格中的数据量过大,导致表格在加载时变得缓慢,而且用户需要不断地浏览页面才能找到自己想要的数据。本文将介绍如何使用JavaScript实现表格数据的分页显示,让用户更容易找到自己想要的数据。一、动态创建表格为了使分页功能更加可控,需要动态创建表格。在HTML页面中,添加一个类似于下面的table元素。

MyBatis分页插件原理详解MyBatis分页插件原理详解Feb 22, 2024 pm 03:42 PM

MyBatis是一个优秀的持久层框架,它支持基于XML和注解的方式操作数据库,简单易用,同时也提供了丰富的插件机制。其中,分页插件是使用频率较高的插件之一。本文将深入探讨MyBatis分页插件的原理,并结合具体的代码示例进行说明。一、分页插件原理MyBatis本身并不提供原生的分页功能,但可以借助插件来实现分页查询。分页插件的原理主要是通过拦截MyBatis

Vue技术开发中如何实现分页功能Vue技术开发中如何实现分页功能Oct 09, 2023 am 09:06 AM

Vue是一种流行的JavaScript框架,用于构建用户界面。在Vue技术开发中,实现分页功能是常见的需求。本文将介绍如何使用Vue来实现分页功能,并提供具体代码示例。在开始之前,我们需要提前准备一些基本知识。首先,我们需要了解Vue的基本概念和语法。其次,我们需要知道如何使用Vue组件来构建我们的应用程序。开始之前,我们需要在Vue项目中安装一个分页插件,

VUE3开发入门教程:使用组件实现分页VUE3开发入门教程:使用组件实现分页Jun 16, 2023 am 08:48 AM

VUE3开发入门教程:使用组件实现分页分页是一个常见的需求,因为在实际开发中,我们往往需要将大量的数据分成若干页以展示给用户。在VUE3开发中,可以通过使用组件实现分页功能,本文将介绍如何使用组件实现简单的分页功能。1.创建组件首先,我们需要创建一个分页组件,使用“vuecreate”命令创建VUE项目,并在src/components目录下创建Pagin

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.