بارگذاری بیشتر مطالب با php , jquery ajax

یوتیوب , توییتر و ف-بوک از تکنیک بارگذاری و نمایش بیشتر استفاده می کنند. آنها به کاربران این امکان را می دهند که به صورت داینامیک مطالب را با کلیک بر روی یک دکمه به جای نمایش لینک های صفحه بندی , نشان دهند. تکنیک نمایش بیشتر خیلی جذاب است چونکه داده های بدون ریفرش مجدد صفحه نمایش داده می شوند . در این مقاله , یک همچنین تکنیک مشابهی برای بارگذاری بیشتر مطالب با php , jquery ajax از دیتابیس را پیاده سازی می کنیم. این آموزش قدم به قدم کل این فرایند را بسیار آسان و قابل درک می کند.

خب شروع کنیم .یک جدول tutorials داخل دیتابیس داریم . حالا ما تمام داده ها را بصورت لیست شده بدون استفاده از صفحه بندی بلکه با استفاده از تکنیک نمایش بیشتر بارگذاری می کنیم.

اول از همه جدول tutorials را داخل دیتابیس می سازیم.

CREATE TABLE `tutorials` (  
    `id` int(11) NOT NULL AUTO_INCREMENT,  
    `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL, 
    `created` datetime NOT NULL,  
    `modified` datetime NOT NULL,  
    `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Inactive',  
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci

CREATE TABLE `tutorials` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

`created` datetime NOT NULL,

`modified` datetime NOT NULL,

`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Inactive',

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci

فایل db_config.php

این فایل برای اتصال به دیتابیس و انتخاب جدول مورد نظر بکار می رود.

//db details
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'test';

//connect and select db
$con = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

//db details

$db_host = 'localhost';

$db_user = 'root';

$db_pass = '';

$db_name = 'test';

//connect and select db

$con = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

فایل index.php

کد جاواسکریپت

قبل شروع کد های جاواسکریپت حتما کتابخانه jquery را بارگذاری کنید. $(document).on(‘click’,’.show_more’,function(){}) به جای تابع live() استفاده می شود . چونکه تابع live() جی کویری منسوخ شده است . $(this).attr(‘id’) برای دریافت id اخرین tutorial استفاده شده است .

$(document).ready(function(){
    $(document).on('click','.show_more',function(){
        var ID = $(this).attr('id');
        $('.show_more').hide();
        $('.loding').show();
        $.ajax({
            type:'POST',
            url:'ajax_more.php',
            data:'id='+ID,
            success:function(html){
                $('#show_more_main'+ID).remove();
                $('.tutorial_list').append(html);
            }
        }); 
    });
});

$(document).ready(function(){

$(document).on('click','.show_more',function(){

var ID = $(this).attr('id');

$('.show_more').hide();

$('.loding').show();

$.ajax({

type:'POST',

url:'ajax_more.php',

data:'id='+ID,

success:function(html){

$('#show_more_main'+ID).remove();

$('.tutorial_list').append(html);

}

});

کد PHP

قبل از هرچیزی باید فایل پیکربندی دیتابیس (db_config.php) را فراخوانی کنیم . ما نتیجه را از جدول tutorials دریافت و به صورت نزولی در لیست نمایش می دهیم.

<div class="tutorial_list">
    <?php
    //include database configuration file
    include('db_config.php');
    
    //get rows query
    $query = mysqli_query($con, "SELECT * FROM tutorials ORDER BY id DESC LIMIT 2");
    
    //number of rows
    $rowCount = mysqli_num_rows($query);
    
    if($rowCount > 0){ 
        while($row = mysqli_fetch_assoc($query)){ 
            $tutorial_id = $row['id'];
    ?>
        <div class="list_item"><a href="javascript:void(0);"><h2><?php echo $row["title"]; ?></h2></a></div>
    <?php } ?>
    <div class="show_more_main" id="show_more_main<?php echo $tutorial_id; ?>">
        <span id="<?php echo $tutorial_id; ?>" class="show_more" title="Load more posts">Show more</span>
        <span class="loding" style="display: none;"><span class="loding_txt">Loading....</span></span>
    </div>
    <?php } ?>
</div>

<?php

//include database configuration file

include('db_config.php');

//get rows query

$query = mysqli_query($con, "SELECT * FROM tutorials ORDER BY id DESC LIMIT 2");

//number of rows

$rowCount = mysqli_num_rows($query);

if($rowCount > 0){

while($row = mysqli_fetch_assoc($query)){

$tutorial_id = $row['id'];

<?php } ?>

<span id="<?php echo $tutorial_id; ?>" class="show_more" title="Load more posts">Show more</span>

<span class="loding" style="display: none;"><span class="loding_txt">Loading....</span></span>

</div>

<?php } ?>

</div>

فایل ajax_more.php

این فایل شامل کدهای php مربوط به عملیات ajax است . ما id اخرین رکورد نمایش داده شده را دریافت و محتویات بعدی را توسط کویری where id > lst نمایش می دهیم.

<?php
if(isset($_POST["id"]) && !empty($_POST["id"])){

//include database configuration file
include('db_config.php');

//count all rows except already displayed
$queryAll = mysqli_query($con,"SELECT COUNT(*) as num_rows FROM tutorials WHERE id < ".$_POST['id']." ORDER BY id DESC");
$row = mysqli_fetch_assoc($queryAll);
$allRows = $row['num_rows'];

$showLimit = 2;

//get rows query
$query = mysqli_query($con, "SELECT * FROM tutorials WHERE id < ".$_POST['id']." ORDER BY id DESC LIMIT ".$showLimit);

//number of rows
$rowCount = mysqli_num_rows($query);

if($rowCount > 0){ 
    while($row = mysqli_fetch_assoc($query)){ 
        $tutorial_id = $row["id"]; ?>
        <div class="list_item"><a href="javascript:void(0);"><h2><?php echo $row[“title”]; ?></h2></a></div>
<?php } ?>
<?php if($allRows > $showLimit){ ?>
    <div class="show_more_main" id="show_more_main<?php echo $tutorial_id; ?>">
        <span id="<?php echo $tutorial_id; ?>" class=“show_more” title="Load more posts">Show more</span>
        <span class="loding" style="display: none;"><span class="loding_txt">Loading….</span></span>
    </div>
<?php } ?>  
<?php 
    } 
}
?>

<?php

if(isset($_POST["id"]) && !empty($_POST["id"])){

//include database configuration file

include('db_config.php');

//count all rows except already displayed

$queryAll = mysqli_query($con,"SELECT COUNT(*) as num_rows FROM tutorials WHERE id < ".$_POST['id']." ORDER BY id DESC");

$row = mysqli_fetch_assoc($queryAll);

$allRows = $row['num_rows'];

$showLimit = 2;

//get rows query

$query = mysqli_query($con, "SELECT * FROM tutorials WHERE id < ".$_POST['id']." ORDER BY id DESC LIMIT ".$showLimit);

//number of rows

$rowCount = mysqli_num_rows($query);

if($rowCount > 0){

while($row = mysqli_fetch_assoc($query)){

$tutorial_id = $row["id"]; ?>

<?php } ?>

<?php if($allRows > $showLimit){ ?>

<span id="<?php echo $tutorial_id; ?>" class=“show_more” title="Load more posts">Show more</span>

<span class="loding" style="display: none;"><span class="loding_txt">Loading….</span></span>

</div>

<?php } ?>

<?php

}

کد css

کد css زیر در اسکریپت ما برای استایل دهی لیست و دکمه نمایش بیشتر (show more) استفاده شده است.

.tutorial_list{ 
margin-bottom:20px;
}
div.list_item {
border-left: 4px solid #7ad03a;
padding: 1px 12px;
background-color:#F1F1F1;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
}
div.list_item {
margin: 5px 15px 2px;
}
div.list_item p {
margin: .5em 0;
padding: 2px;
font-size: 13px;
line-height: 1.5;
}
.list_item a {
text-decoration: none;
padding-bottom: 2px;
color: #0074a2;
-webkit-transition-property: border,background,color;
transition-property: border,background,color;-webkit-transition-duration: .05s;
transition-duration: .05s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.list_item a:hover{ 
text-decoration:underline;
}
.show_more_main {
margin: 15px 25px;
}
.show_more {
background-color: #f8f8f8;
background-image: -webkit-linear-gradient(top,#fcfcfc 0,#f8f8f8 100%);
background-image: linear-gradient(top,#fcfcfc 0,#f8f8f8 100%);
border: 1px solid;
border-color: #d3d3d3;
color: #333;
font-size: 12px;
outline: 0;
}
.show_more {
cursor: pointer;
display: block;
padding: 10px 0;
text-align: center;
font-weight:bold;
}
.loding {
background-color: #e9e9e9;
border: 1px solid;
border-color: #c6c6c6;
color: #333;
font-size: 12px;
display: block;
text-align: center;
padding: 10px 0;
outline: 0;
font-weight:bold;
}
.loding_txt {
background-image: url(loading_16.gif);
background-position: left;
background-repeat: no-repeat;
border: 0;
display: inline-block;
height: 16px;
padding-left: 20px;
}

.tutorial_list{

margin-bottom:20px;

}

div.list_item {

border-left: 4px solid #7ad03a;

padding: 1px 12px;

background-color:#F1F1F1;

-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);

box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);

}

div.list_item {

margin: 5px 15px 2px;

}

div.list_item p {

margin: .5em 0;

padding: 2px;

font-size: 13px;

line-height: 1.5;

}

.list_item a {

text-decoration: none;

padding-bottom: 2px;

color: #0074a2;

-webkit-transition-property: border,background,color;

transition-property: border,background,color;-webkit-transition-duration: .05s;

transition-duration: .05s;

-webkit-transition-timing-function: ease-in-out;

transition-timing-function: ease-in-out;

}

.list_item a:hover{

text-decoration:underline;

}

.show_more_main {

margin: 15px 25px;

}

.show_more {

background-color: #f8f8f8;

border: 1px solid;

border-color: #d3d3d3;

color: #333;

font-size: 12px;

outline: 0;

}

.show_more {

cursor: pointer;

display: block;

padding: 10px 0;

text-align: center;

font-weight:bold;

}

.loding {

background-color: #e9e9e9;

border: 1px solid;

border-color: #c6c6c6;

color: #333;

font-size: 12px;

display: block;

text-align: center;

padding: 10px 0;

outline: 0;

font-weight:bold;

}

.loding_txt {

background-position: left;

background-repeat: no-repeat;

border: 0;

display: inline-block;

height: 16px;

padding-left: 20px;

}

امیدوارم از این آموزش هم لذت برده باشید . موفق باشید .

لغو پاسخ

ابوالفضل ۲۸ بهمن ۱۳۹۹

“show_more” این کدم مشکل داره
“show_more”

پاسخ
ابوالفضل ۲۸ بهمن ۱۳۹۹

عالی عالیی
فقط این قطعه کد مشکل داره[“title”]
[‘title’]

پاسخ
حسین مافی ۱۱ آبان ۱۳۹۸

سلام من چطور میتونم مطلب داخل این صفحه بزارم و با اسکرول نمایش بدم؟؟؟

پاسخ

حسن شفیعی ۱۵ آبان ۱۳۹۸

سلام. باید مطالب رو داخل دیتابیس اضافه کنید.
که میتونید بصورت دستی یا یک پنل مدیریت طراحی و از آنجا اضافه کنید.
موفق باشید.

پاسخ

محمدرضا کیانی ۱۰ تیر ۱۳۹۸

فکر نکنم تو وردپرس از این روش استفاده کرد چون خود وردپرس ajax داره و دیتابیسش هم فرق می کنه
یکمی گیچ کننده هست تو وردپرس بخوایم پیاده کنیم ولی پلاگین هایی هستند که این کار رو بکنند و خبلی هم خوبه

اگه می شه آموزش بدید که چطوری کاستم خودمون بنویسیم

پاسخ

حسن شفیعی ۱۰ تیر ۱۳۹۸

سلام. به راحتی میشه این مورد رو در وردپرس پیاده سازی کرد. یا باید به php مسلط باشید تا پیاده کنید یا به وردپرس.
نمیشه آموزش خاصی در این مورد داد کافیه دست به کد بزنید از مثال های این آموزش برای سعی در پیاده سازی اون در وردپرس کنید. همچنین پلاگینی که در نظر دارید رو کدهاش رو بررسی کنید
اگر در مرحله ای به مشکل برخوردید کامنت بدید راهتمایی بشه
موفق باشید.

پاسخ

محمدرضا کیانی ۱۱ تیر ۱۳۹۸

سلام ممنون بابت پاسخگوییتون

من تا حالا درست کردم ولی اگه بخوای جی کوئری رو دستی تو وردپرس اضافه کنی بهم می ریزه کتابخانه های جاواسکریپ وردپرس و باید از تابع خود وردپرس پیاده کرد و من دارم ایندفع با لاراول این ویژگی رو پیاده می کنم و هرچیزی که دراین مورد بود را سرچ کردم چیزی دتگیرم نشد می تونید راهنمایی کنید؟

پاسخ
حسن شفیعی ۱۱ تیر ۱۳۹۸

سلام.
باید به اینصورت اضافه کنید : wp_enqueue_script( ‘bootjs’, get_template_directory_uri() . ‘/js/jquery.min.js’, array( ‘jquery’ ), ‘1.4.1’, true );
در مورد لاراول هم برای پیاده سازی اینکار میتونید از کتابخانه های رایگان استفاده کنید که با کامپوزر به راحتی قابل نصب و استفاده است.

پاسخ

امیرحسین آقاجانی ۲۰ آذر ۱۳۹۶

چطوری یه کاری کنم که با اسکرول این اتفاق بیوفته

پاسخ

حسن شفیعی ۲۰ آذر ۱۳۹۶

سلام . از رویداد .scroll() در جی کویری استفاده کنید .
https://www.w3schools.com/jquery/event_scroll.asp

پاسخ

بارگذاری بیشتر مطالب با php , jquery ajax

فایل db_config.php

فایل index.php

فایل ajax_more.php

کد css

ساخت صفحه بندی infinite scroll با PHP و jQuery

ساخت پنجره modal برای اضافه/ویرایش با php و ajax

هایلایت منوی فعال با jQuery

خواندن JSON در جی کوئری

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه