یوتیوب , توییتر و ف-بوک از تکنیک بارگذاری و نمایش بیشتر استفاده می کنند. آنها به کاربران این امکان را می دهند که به صورت داینامیک مطالب را با کلیک بر روی یک دکمه به جای نمایش لینک های صفحه بندی , نشان دهند. تکنیک نمایش بیشتر خیلی جذاب است چونکه داده های بدون ریفرش مجدد صفحه نمایش داده می شوند . در این مقاله , یک همچنین تکنیک مشابهی برای بارگذاری بیشتر مطالب با php , jquery ajax از دیتابیس را پیاده سازی می کنیم. این آموزش قدم به قدم کل این فرایند را بسیار آسان و قابل درک می کند.
خب شروع کنیم .یک جدول tutorials داخل دیتابیس داریم . حالا ما تمام داده ها را بصورت لیست شده بدون استفاده از صفحه بندی بلکه با استفاده از تکنیک نمایش بیشتر بارگذاری می کنیم.
اول از همه جدول tutorials را داخل دیتابیس می سازیم.
1 2 3 4 5 6 7 8 |
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
این فایل برای اتصال به دیتابیس و انتخاب جدول مورد نظر بکار می رود.
1 2 3 4 5 6 7 8 |
//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 استفاده شده است .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(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 دریافت و به صورت نزولی در لیست نمایش می دهیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> |
فایل ajax_more.php
این فایل شامل کدهای php مربوط به عملیات ajax است . ما id اخرین رکورد نمایش داده شده را دریافت و محتویات بعدی را توسط کویری where id > lst نمایش می دهیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?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 } } ?> |
کد css
کد css زیر در اسکریپت ما برای استایل دهی لیست و دکمه نمایش بیشتر (show more) استفاده شده است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
.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; } |
امیدوارم از این آموزش هم لذت برده باشید . موفق باشید .
“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