2019 4G LTE 4G VoLTE 5G 7th Pay Commission Aadhaar Actor Wallpapers Actress Wallpaper Adriana Lima AdSense Ahoi Ashtami Airtel Airtel DTH Akshay Kumar Alcatel Alexa Rank Amazon Android Android Pie Android Q Anna university Antivirus Anushka Sharma apna csc online Apple Apps Army Army App Asthma Asus Atal Seva mirchpur Athletics Auto Auto Insurance Avengers Axis Bank Backlinks Badhajmi Bajaj Bang Bang Reloaded Bank Battery Bhai Dooj Katha Bhakti Bharti Bhumi Pednekar Big Bazaar Big TV Bing BlackBerry Blogger BlogSpot Bluetooth BoB Bollywood Boot Boxing Breathlessness Browser BSEH Bsnl Budget Budhvar Business buy Cable TV Camera Car Car Loan Card Less ATM Cash CBSE Celebrity CEO Chandra Grahan Channels Chest Pain Chhath chrome Clean WhatsApp Cache Common Service Centres (CSC) Mirchpur Hisar Haryana - Front of Jyoti Sen Sec School Mirchpur Comparisons Computer Coolpad Corona COVID 19 COVID 19 HARYANA Credit Cricket Crime CSC Cylinder Dama Dard Deepika Padukone Defence Detel Dhanteras Diamond Crypto DigiLocker App DigiPay App Digital India App Digital Indian Gov Dish TV Diwali DNS setting Domain Donate Doogee DTH DTH Activation DTH Installation DTH Plans in India Dusshera E-seva Kender mirchpur Earn Money Education Electronics Email Entertinment Ex-serviceman Extensions Facebook FASTag Fatigue Festivals FlicKr Flipkart Foldable Smartphone Food Foursquare Funny Gadgets Galaxy Galaxy S8 Game Ganesh ganesh chaturthi Gas Problems Gastric Problem Gharelu Gionee Gmail God Google Google + Google Assistant Google Drive Google Duo Google Pixel Google Tez Google Voice Google+ Govardhan Puja GroupMe GST GTA Guide GuruSatsang Guruvar Hamraaz hamraaz app hamraaz app download hamraaz army hamraaz army app hamraaz army app download Hamraaz Army App version 6 Apk Happy New Year Hariyali Teej Hartalika Teej Harvard University Haryana haryana csc online HDFC Bank Headphones Health Heart Attack Heart Fail Heart Problems Heart Stroke Heena Sidhu Hello App Help Hernia Hindi History Hockey Holi Holi Katha Hollywood Home Loan Honor HostGator Hosting Hrithik Roshan HTC Huawei humraaz app iBall IBM ICICI Bank Idea Ilaj India india vs china indian army app Indigestion Infinix InFocus Information Infosys Instagram Insurance Intel Internet Intex Mobile iPad iPhone iPhone 8 IPL IRCTC iVoomi Jan Dhan Account Janmashtami Japanese Encephalitis Javascript JBL Jio Jio GigaFiber Jio Meet JioPOS JioRail JioSaavn Jokes Kamjori Karbonn Kareena Kapoor Kartik Purnima Karva Chauth Karwa Chauth Kasam Tere Pyaar Ki Katrina Kaif Kendall Jenner Keywords Kimbho Kodak Kumkum Bhagya Kushth Rog Landline Laptop Lava Lenovo Leprosy LET Lethargy LG Library of Congress Lifestyle Linkedin Lisa Haydon Livejournal Liver Cancer Loans LPG Gas mAadhaar Macbook Maha Shivratri Makar Sankranti Map Market Mary Kom Massachusetts Institute of Technology Meizu Messages Mi Micromax Microsoft Mobile Modi Mokshada Ekadashi Money Motorcycles Motorola Movie Muscle Pain Music Myspace Narendra Modi Narsingh Jayanti Nature Naukri Navratri Nemonia Netflix Network News Nexus Nia Sharma Nokia Notifications Nuskhe OBC Ocean Office Offrs Ola Cab OMG OnePlus Online Opera Oppo Oreo Android Orkut OS OxygenOS Padmavati PagalWorld Pain Pain Sensation Pakistan PAN PAN Card Panasonic Passwords Patanjali Pay Payment Paypal Paytm PC PDF Peeda Pendrive Pension Personal Loan Pet Me Gas PF Phone Photo PHP Pila Bukhar Pinterest Pixel Plan PNB Bank Pneumonia PNR Poco Poster PPC Pradhan Mantri Kisan Samman Nidhi Pradhanmantri Kisan Samman Nidhi Yojna Pradosh Pragya Jaiswal Prepaid Princeton University Printer Priyanka Chopra promote my youtube channel promote video on youtube cost promote youtube channel promote youtube channel free promote youtube video free PUBG Qualcomm Quora Quotes Race 3 Railway Rambha Tritiya Vrat RBI Realme Recruitment Redmi Relationship Religious Restore Results Review Rule Sai Dharam Tej Saina Nehwal Salman Khan Samsung Sanusha Satsang Video Sawan Somvar Vrat SBI Bank Script Sell SEO Serial Server Shabd Shahid Kapoor Shanivar Sharad Poornima Sharp Shiv Shopping Shreyasi Singh Shruti Haasan Signal Sim Smart Android TV Smartphones SMS Snapchat Social Software Somvar Sonakshi Sinha Sonam Kapoor Soney Songs Sony Xperia Space Speakers Specifications Sports Sql Stanford University State Bank of India Stickers Stomach Upset Story Sun Direct Sunny Leone Surabhi Sushant Singh Rajput Swadeshi Swas Rog Tata Sky Tax Tech Technology Tecno Telegram Telugu Thakan Tiger Shroff Tiger Zinda Hai Tips Tiredness Tollywood Tool Top Trending People Trading Trai TRAI Rules for cable TV Trailer Treatment Trends True Things Truecaller Tubelight Tulsi Vivah Tumblr Tv Twitter Typing Uber Umang App University of Oxford UP Board Upay Upchar Update USA USB Vacancies Valentines Day Verizon Vertu Viber Video Videocon d2h Videos Vijayadashami Viral Bukhar Viral Fever Virat Kohli Virgin Visas Vivo VLE Vodafone Voter Card VPN Vrat Katha Vrat Vidhi Wallpaper War Wayback Machine Weakness WhatsApp WhatsApp Cleaner WhatsApp Status WhatsApp stickers Wi-Fi WiFi Windows Windows 10 Wipro Wireless WordPress workstation WWE Xiaomi Xiaomi Mi 6 Yeh Hai Mohabbatein Yellow Fever Yo Yo Honey Singh Yoga yojna YotaPhone YouTube youtube promotion youtube promotion free ZTE अपच अस्थमा आलस्य इलाज उपचार उपाय उमंग ऐप कहानियाँ कुष्ठरोग कोरोना वायरस गुरुसत्संग घरेलू जन धन योजना जापानी इन्सेफेलाइटिस डिजिटल इंडिया डिजिटल इंडिया अप्प्स डिजिपे ऐप डिजीलॉकर ऐप थकान दमा दर्द निमोनिया नुस्ख़े पीड़ा पीतज्वर पीला बुखार पेट में गैस पैन कार्ड प्रधानमंत्री किसान सम्मान निधि बदहज़मी भक्ति मांसपेशियों में दर्द लीवर कैंसर वायरल बुखार वोटर कार्ड शब्द सच्ची बातें सत्संग वीडियो सरसों सीने में दर्द स्कीम स्वास रोग हर्निया

Pagination with Jquery, PHP , Ajax and MySQL.

Long days back I had posted an article Pagination with jQuery, MySQL and PHP with out refreshing page. Modified old script and added extra features like First, Previous, Next and Last buttons. Use it and enrich your web applications.


ySQL messages table contains two columns msg_id and message
CREATE TABLE messages
(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message VARCHAR(150)
);

JavaScript Code
This script works like a data controller.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{

function loading_show()
{
$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}

function loading_hide()
{
$('#loading').fadeOut();
}

function loadData(page)
{
loading_show();
$.ajax
({
type: "POST",
url: "load_data.php",
data: "page="+page,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
});

</script>

load_data.php
Contains PHP coding. Displaying data from the messages table.
<?php
include('db.php');
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15// Per page records
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";
$query_pag_data = "SELECT msg_id,message from messages LIMIT $start, $per_page";
$result_pag_data = mysqli_query($query_pag_data);
$msg = "";
while ($row = mysqli_fetch_array($result_pag_data,MYSQLI_ASSOC))
{
$htmlmsg=htmlentities($row['message']); //HTML entries filter
$msg .= "<li><b>" . $row['msg_id'] . "</b> " . $htmlmsg . "</li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"// Content for Data
/* -----Total count--- */
$query_pag_num = "SELECT COUNT(*) AS count FROM messages"// Total records
$result_pag_num = mysqli_query($query_pag_num);
$row = mysqli_fetch_array($result_pag_num,MYSQLI_ASSOC);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);
/* -----Calculating the starting and endign values for the loop----- */

//Some Code. Available in download script 

}
?>

db.php
Database configuration file, modify username, password and database values. 
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
Labels:

Post a Comment

[blogger][facebook]

Digitalindiagov.com

Satish Kumar

Contact Form

Name

Email *

Message *

Powered by Blogger.