Home >Web Front-end >JS Tutorial >jquery ashx non-refresh GridView data display plug-in (implementing paging, sorting, filtering functions)_jquery

jquery ashx non-refresh GridView data display plug-in (implementing paging, sorting, filtering functions)_jquery

WBOY
WBOYOriginal
2016-05-16 18:28:461004browse

Reason: jquery is simple, has good compatibility and is easy to package. Without further ado, let’s start writing our Jquery plug-in right away. There should be many people who have written similar plug-ins, and I also imitated flexGrid in some ways.

Requirements: GridView displays data, no refresh paging, no refresh sorting, no refresh filtering (search data), based on ASP.NET (we have ashx general processing files here to implement).

Technology used: asp.net2.0, jquery, css

The first thing I write about is the jquery plug-in. The core function used is the ajax function of jquery, which is convenient and fast.

Copy code The code is as follows:

$.ajax({
type: p. method,
url: p.url,
data:param,
success: function(msg){
$.AddData(msg,showbox,p);
},
error: function(msg){$.ErrorAjax(showbox,p.errorMsg);},
beforeSend:function(){$.AddLoading(showbox);},
complete:function(){$.MoveLoading (showbox);}
});

After reading such a simple sentence, jquery is more enjoyable. Please download the attachment below to view the specific code.

First post a picture of the generated result to take a look (the style is not very good-looking, feel free to modify it if necessary)

jquery ashx non-refresh GridView data display plug-in (implementing paging, sorting, filtering functions)_jquery

Sort and filter functions

jquery ashx non-refresh GridView data display plug-in (implementing paging, sorting, filtering functions)_jquery

jquery ashx’s non-refresh paging function

jquery ashx non-refresh GridView data display plug-in (implementing paging, sorting, filtering functions)_jquery

In fact, in addition to jquery serving as the main structure of the entire plug-in, another important file here is the general processing file ashx. ashx outputs json code like {n page:1,ntotal:0,pages:1,rows:'',cols:''} in my entire jqueryGrid plug-in. I believe friends who have used josn will understand. In order to reduce errors, I used a third-party plug-in Newtonsoft.Json, which is the JsonConvert.DeserializeObject() function that formats json strings.

Of course, this functional plug-in is suitable for use in web applications and internal websites, but it is not suitable for websites. After all, from an SEO perspective, the data directly generated by jquery is not a good display method. Not much to say, you can take a look at my code. If you have better suggestions or modifications for this plug-in, please share it.
jquery ashx no refresh GridView data display plug-in download

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