Home Backend Development PHP Tutorial php+jQuery implements news tag classification and refresh-free paging_PHP tutorial

php+jQuery implements news tag classification and refresh-free paging_PHP tutorial

Jul 21, 2016 pm 02:55 PM
jquery point Pagination refresh exist accomplish widely application news Label Now of

Nowadays, jquery is used more and more widely, and the effect of tag classification + non-refresh paging has been implemented in the news section of many websites.

I also tried to write one myself, and the rendering is as follows (the style can be customized according to user needs):

The implementation process will be introduced in detail below:

I have always tried to solve the problem by seeing the tricks. Three things need to be used here - tab effect plug-in and paging plug-in, and jquery's getJson request.

So I used the jquery-ui plug-in and jquery-page plug-in. Please click on the file name below to download.

It contains 3 JS script files and 2 style sheets:

jquery-1.3.2.min.js

jquery.pager.js

jquery-ui-1.7.2.custom.min.js

jquery-ui-1.7.2.custom.css

page.css

The html page code is as follows:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.bkjia.com]


php + jquery ui + jquery pager - Liehuo.Net














The page makes getJson requests for three pages: ajax4.php, ajax5.php, and ajax6.php.

The codes of these three pages are similar. They are just the classification of years. I have not done the code here. It has been optimized.

can actually be processed on the same page. Just add a parameter to the request address.

Ajax.php code is as follows:

Copy to ClipboardLiehuo.Net CodesQuoted content: [www.bkjia.com]
header("content-type:text/html;charset:utf-8");
$db = @ mysql_connect("Server host address", "Database account"," Database password");
mysql_select_db("database name");
$rs=mysql_query("set names utf8");
//If the pager parameter is passed
if(isset($_GET ['pager']) && isset($_GET['count']))
{
echo GetPager($_GET['count'],$_GET['pager']);
}
else
{
echo "No parameters passed in!";
}


function GetPager($count,$pager)
{

$begin = start time;
$end = end time;

$rs=mysql_query("SELECT * FROM data table WHERE (pubdate BETWEEN $begin AND $end) ORDER BY pubdate DESC limit ". ($pager-1)*$count.",".$count);

while ($r=mysql_fetch_assoc($rs))
{
$temp[]=$r;
}

$html_string="";
foreach($temp as $k=>$v)
{
//Assume that the url field is the link address, title is the news title, and pubdate is the publication time

$html_string.=" ";
}


$html_string.="
 * ".$v['title']. "".$v["pubdate"]."
";
//This is the number of news reads, it is not recommended to read too much
$num=40 ;
//The total number of news pages is rounded
$num_string=ceil($num/$count);

//The data in JSON format is returned here in the form of key-value pairs, 0 is the total number of news pages, 1 is the spliced ​​HTML news page
$arr=array("0"=>$num_string, "1"=>$html_string);
$jarr=json_encode($arr );
echo $jarr;

}

?>

Reprinted from: http://www.cnblogs.com/tianxin2001x/

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/364463.htmlTechArticleNow jquery is more and more widely used, and tag classification + no refresh has been implemented in the news section of many websites Pagination effect. I also tried to write one myself, and the effect is as follows (like...
Statement of this Website
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

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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1666
14
PHP Tutorial
1273
29
C# Tutorial
1252
24
How to implement dual WeChat login on Huawei mobile phones? How to implement dual WeChat login on Huawei mobile phones? Mar 24, 2024 am 11:27 AM

How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously

How to Undo Delete from Home Screen in iPhone How to Undo Delete from Home Screen in iPhone Apr 17, 2024 pm 07:37 PM

Deleted something important from your home screen and trying to get it back? You can put app icons back on the screen in a variety of ways. We have discussed all the methods you can follow and put the app icon back on the home screen. How to Undo Remove from Home Screen in iPhone As we mentioned before, there are several ways to restore this change on iPhone. Method 1 – Replace App Icon in App Library You can place an app icon on your home screen directly from the App Library. Step 1 – Swipe sideways to find all apps in the app library. Step 2 – Find the app icon you deleted earlier. Step 3 – Simply drag the app icon from the main library to the correct location on the home screen. This is the application diagram

The role and practical application of arrow symbols in PHP The role and practical application of arrow symbols in PHP Mar 22, 2024 am 11:30 AM

The role and practical application of arrow symbols in PHP In PHP, the arrow symbol (->) is usually used to access the properties and methods of objects. Objects are one of the basic concepts of object-oriented programming (OOP) in PHP. In actual development, arrow symbols play an important role in operating objects. This article will introduce the role and practical application of arrow symbols, and provide specific code examples to help readers better understand. 1. The role of the arrow symbol to access the properties of an object. The arrow symbol can be used to access the properties of an object. When we instantiate a pair

PHP Programming Guide: Methods to Implement Fibonacci Sequence PHP Programming Guide: Methods to Implement Fibonacci Sequence Mar 20, 2024 pm 04:54 PM

The programming language PHP is a powerful tool for web development, capable of supporting a variety of different programming logics and algorithms. Among them, implementing the Fibonacci sequence is a common and classic programming problem. In this article, we will introduce how to use the PHP programming language to implement the Fibonacci sequence, and attach specific code examples. The Fibonacci sequence is a mathematical sequence defined as follows: the first and second elements of the sequence are 1, and starting from the third element, the value of each element is equal to the sum of the previous two elements. The first few elements of the sequence

From beginner to proficient: Explore various application scenarios of Linux tee command From beginner to proficient: Explore various application scenarios of Linux tee command Mar 20, 2024 am 10:00 AM

The Linuxtee command is a very useful command line tool that can write output to a file or send output to another command without affecting existing output. In this article, we will explore in depth the various application scenarios of the Linuxtee command, from entry to proficiency. 1. Basic usage First, let’s take a look at the basic usage of the tee command. The syntax of tee command is as follows: tee[OPTION]...[FILE]...This command will read data from standard input and save the data to

How to implement the WeChat clone function on Huawei mobile phones How to implement the WeChat clone function on Huawei mobile phones Mar 24, 2024 pm 06:03 PM

How to implement the WeChat clone function on Huawei mobile phones With the popularity of social software and people's increasing emphasis on privacy and security, the WeChat clone function has gradually become the focus of people's attention. The WeChat clone function can help users log in to multiple WeChat accounts on the same mobile phone at the same time, making it easier to manage and use. It is not difficult to implement the WeChat clone function on Huawei mobile phones. You only need to follow the following steps. Step 1: Make sure that the mobile phone system version and WeChat version meet the requirements. First, make sure that your Huawei mobile phone system version has been updated to the latest version, as well as the WeChat App.

Explore the advantages and application scenarios of Go language Explore the advantages and application scenarios of Go language Mar 27, 2024 pm 03:48 PM

The Go language is an open source programming language developed by Google and first released in 2007. It is designed to be a simple, easy-to-learn, efficient, and highly concurrency language, and is favored by more and more developers. This article will explore the advantages of Go language, introduce some application scenarios suitable for Go language, and give specific code examples. Advantages: Strong concurrency: Go language has built-in support for lightweight threads-goroutine, which can easily implement concurrent programming. Goroutin can be started by using the go keyword

The wide application of Linux in the field of cloud computing The wide application of Linux in the field of cloud computing Mar 20, 2024 pm 04:51 PM

The wide application of Linux in the field of cloud computing With the continuous development and popularization of cloud computing technology, Linux, as an open source operating system, plays an important role in the field of cloud computing. Due to its stability, security and flexibility, Linux systems are widely used in various cloud computing platforms and services, providing a solid foundation for the development of cloud computing technology. This article will introduce the wide range of applications of Linux in the field of cloud computing and give specific code examples. 1. Application virtualization technology of Linux in cloud computing platform Virtualization technology

See all articles