Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > ใครมีตัวอย่าง Source code PHP แบ่งหน้า แล้ววางลิ้งไว้ได้ทั้งด้านบน-ล่าง บ้างคะ (มีรูป)

[PHP] ใครมีตัวอย่าง Source code PHP แบ่งหน้า แล้ววางลิ้งไว้ได้ทั้งด้านบน-ล่าง บ้างคะ (มีรูป)

เริ่มหัวข้อใหม่

Avrill.NET

โพสกระทู้ ( 480 )
บทความ ( 0 )

ตามภาพเลยค่ะ

Tag : PHP, HTML/CSS

ประวัติการแก้ไข
2012-05-24 14:02:56

Date : 2012-05-24 14:02:27

By : Avrill

View : 5035

Reply : 25

No. 1

T-MONROE

โพสกระทู้ ( 615 )
บทความ ( 4 )

แบบนี้หรือป่าวครับ...
http://www.xarg.org/2011/09/jquery-pagination-revised/

Date : 2012-05-24 14:11:09

By : t-monroe

No. 2

Avrill.NET

โพสกระทู้ ( 480 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : t-monroe เมื่อวันที่ 2012-05-24 14:11:09

รายละเอียดของการตอบ ::

แบบนี้ก็ใช่ค่ะ แต่ยังใช้ไม่เป็น พยามยามศึกษาอยู่ค่ะ แต่อยากได้แบบ class หรือ ฟังชั่น php มากกว่าค่ะ

Date : 2012-05-24 15:03:16

By : Avrill

No. 3

Avrill.NET

โพสกระทู้ ( 480 )
บทความ ( 0 )

ลองทำตามแล้ว ไม่สำเร็จ ใครก็ได้ช่วยทีค่ะ ดูให้หน่อยว่าเราทำผิดตรงไหน

Quote:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="pagstyle.css" type="text/css" />

<style type="text/css">

#main div.pagination a {
text-decoration: inherit;
color:inherit;
font-weight: inherit;
}

div.pagination {
text-align: left!important;
padding: 5px;
}

div.element {
display: none;
}

div.pagination span.current,
div.pagination span.disabled {
cursor: default
}

span.number, span.lapping {
font-weight: bold;
}

#scroll a.current {
background-color:#c33;
}

#scroll a {
display:block;
background-color: #33c;
width:15px;
height:15px;
margin:5px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
cursor:pointer;
}

#scroll {
position:fixed;
right:30px;
top:150px;
}

#exX {
-webkit-transform: rotate(90deg);font-weight:bold;color:#44c;
-moz-transform: rotate(90deg); position:fixed;right:10px;top:280px;
}

#main table {
width: 500px;
}
#main table td {
width: 20%;

}
#main td > span {
width: 70px;
display: block;
float:left;
text-align: right;
}
#main table th {
background: #333;
color:#fff;
}
h5 {
margin:0;
font-size:13px;
}

#images {
position:relative;
height:470px;
}

#images img {
position:absolute;
left:0px;
background:#fff;
}

#imagepaging {
position:relative;height:15px;
}

#imagepaging span, #imagepaging a {
position:absolute;display:block;width:15px;height:15px;cursor:pointer;
background-color:#ccc
}

#imagepaging span#imageshadow {
top:-2px;
background:#333;width:19px;height:19px;cursor:default;
}

#formatlinks a {
background:#ddd;
padding:5px;
float:left;
margin:3px;
font-weight:normal;
text-transform: lowercase;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor:pointer;
}

</style>
</head>

<body>

<div id="exX">Examples</div>

<h3 id="ex2">Using Paging with multiple paginators</h3>

<h4>Average temperature of some cities in June</h4>

<div class="pagination"></div>

<div id="content">

<div class="element">
<h5>Las Vegas</h5>
<p>37°C / 98.6°F</p>
</div>

<div class="element">
<h5>Cairo</h5>
<p>35°C / 95°F</p>
</div>

<div class="element">
<h5>Houston</h5>
<p>33°C / 91.4°F</p>
</div>

<div class="element">
<h5>Madrid</h5>
<p>31°C / 87.8°F</p>
</div>

<div class="element">
<h5>Athens</h5>
<p>30°C / 86°F</p>
</div>

<div class="element">
<h5>Lisbon</h5>
<p>27°C / 80.6°F</p>
</div>

<div class="element">
<h5>Rome</h5>
<p>27°C / 80.6°F</p>
</div>

<div class="element">
<h5>Moscow</h5>
<p>23°C / 73.4°F</p>
</div>

<div class="element">
<h5>Los Angeles</h5>
<p>22°C / 71.6°F</p>
</div>

<div class="element">
<h5>San Francisco</h5>
<p>22°C / 71.6°F</p>
</div>

<div class="element">
<h5>Lima</h5>
<p>19°C / 66.2°F</p>
</div>

<div class="element">
<h5>Sydney</h5>
<p>18°C / 64.4°F</p>
</div>

<div class="element">
<h5>Johannesburg</h5>
<p>17°C / 62.6°F</p>
</div>

<div class="element">
<h5>Buenos Aires</h5>
<p>16° / 60.8°F</p>
</div>

</div>

<div id="pagination"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.paging.min.js"></script>
<script type="text/javascript" src="paging.demo.min.js"></script>
<script src="jquery.ba-hashchange.js"></script>

<script>

var prev = {start: 0, stop: 0},
cont = $('#content div.element');

$(".pagination").paging(cont.length, {
format: '[< ncnnn! >]',
perpage: 3,
lapping: 2,
page: null, // we await hashchange() event
onSelect: function (page) {

var data = this.slice;

cont.slice(prev[0], prev[1]).css('display', 'none');
cont.slice(data[0], data[1]).fadeIn("slow");

prev = data;

return true; // locate!
},
onFormat: formatCallback
});

$(window).hashchange(function() {

if (window.location.hash)
Paging.setPage(window.location.hash.substr(1));
else
Paging.setPage(1); // we dropped the initial page selection and need to run it manually
});

$(window).hashchange();
</script>
</body>
</html>

Date : 2012-05-25 10:47:52

By : Avrill

No. 4

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

https://www.thaicreate.com/php/forum/078810.html

Date : 2012-05-25 11:26:13

By : sakuraei

No. 5

T-MONROE

โพสกระทู้ ( 615 )
บทความ ( 4 )

ที่เห็นมีหลายตัวอย่าง ถ้าข้อมูลเยอะๆ ก็ใช้ตัวที่มาจาก Query ซึ่งจะดีกว่าการนับ element แบบตัวนี้
Code (JavaScript)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jQuery-Paging/jquery.paging.min.js"></script>
<script type="text/javascript" src="jQuery-Paging/jquery.xcolor.min.js"></script>
 
<script>
var prev = {start: 0, stop: 0},
    cont = $('#content div.element');
 
$(".pagination").paging(cont.length, {
        format: '[< ncnnn! >]',
        perpage: 3,
        lapping: 0,
        page: null, // we await hashchange() event
        onSelect: function (page) {
 
                var data = this.slice;
 
                cont.slice(prev[0], prev[1]).css('display', 'none');
                cont.slice(data[0], data[1]).fadeIn("slow");
 
                prev = data;
 
                return true; // locate!
        },
        onFormat: formatCallback
});
 
$(window).hashchange(function() {
 
        if (window.location.hash)
                Paging.setPage(window.location.hash.substr(1));
        else
                Paging.setPage(1); // we dropped the initial page selection and need to run it manually
});
 
$(window).hashchange();
</script>
</head>
<body>
<div class="a">
 
    <div class="pagination toppagination"></div>
 
    <div id="content">
 
        <div style="color: rgb(255, 0, 0); display: block;" class="element">
            <h5>Las Vegas</h5>
            <p>37°C / 98.6°F</p>
        </div>
 
        <div style="color: rgb(236, 7, 18); display: block;" class="element">
            <h5>Cairo</h5>
            <p>35°C / 95°F</p>
        </div>
 
        <div style="color: rgb(218, 14, 36); display: block;" class="element">
            <h5>Houston</h5>
            <p>33°C / 91.4°F</p>
        </div>
 
        <div style="color: rgb(200, 21, 54); display: none;" class="element">
            <h5>Madrid</h5>
            <p>31°C / 87.8°F</p>
        </div>
 
        <div style="color: rgb(182, 29, 72); display: none;" class="element">
            <h5>Athens</h5>
            <p>30°C / 86°F</p>
        </div>
 
        <div style="color: rgb(163, 36, 91); display: none;" class="element">
            <h5>Lisbon</h5>
            <p>27°C / 80.6°F</p>
        </div>
 
        <div style="color: rgb(145, 43, 109); display: none;" class="element">
            <h5>Rome</h5>
            <p>27°C / 80.6°F</p>
        </div>
 
        <div style="color: rgb(127, 51, 127); display: none;" class="element">
            <h5>Moscow</h5>
            <p>23°C / 73.4°F</p>
        </div>
 
        <div style="color: rgb(109, 58, 145); display: none;" class="element">
            <h5>Los Angeles</h5>
            <p>22°C / 71.6°F</p>
        </div>
 
        <div style="color: rgb(91, 65, 163); display: none;" class="element">
            <h5>San Francisco</h5>
            <p>22°C / 71.6°F</p>
        </div>
 
        <div style="color: rgb(72, 72, 182); display: none;" class="element">
            <h5>Lima</h5>
            <p>19°C / 66.2°F</p>
        </div>
 
        <div style="color: rgb(54, 80, 200); display: none;" class="element">
            <h5>Sydney</h5>
            <p>18°C / 64.4°F</p>
        </div>
 
        <div style="color: rgb(36, 87, 218); display: none;" class="element">
            <h5>Johannesburg</h5>
            <p>17°C / 62.6°F</p>
        </div>
 
        <div style="color: rgb(18, 94, 236); display: none;" class="element">
            <h5>Buenos Aires</h5>
            <p>16° / 60.8°F</p>
        </div>
 
    </div>
 
    <div class="pagination toppagination"></div>
</div>
 
<script type="text/javascript">
 
(function($, window) {
 
    var B1, B2, TABLE, CURTAB, STAT, PRIME = new Array();
 
    var Prev = {
        start: 0,
        stop: 0
    }, TabPage, Paging = [], CONT;
 
 
    window.toggle = function(id) {
 
        $('#' + id).slideToggle("slow", function() {});
    }
 
    window.setNumber = function(num) {
 
        TabPage.setOptions({
            page: 1
        });
        TabPage.setNumber(num);
        TabPage.setPage(); // reads options and redraw contents
 
        for (var i = Paging.length; --i; ) {
            Paging[i].setOptions({
                lapping: lap,
                page: 1
            });
            Paging[i].setNumber(num);
            Paging[i].setPage(); // reads options and redraw contents
        }
        $('.number').html(num);
    }
 
    window.setLapping = function(lap) {
 
        TabPage.setOptions({
            lapping: lap * 4,
            page: 1
        });
        TabPage.setPage(); // reads options and redraw contents
 
        for (var i = Paging.length; i--; ) {
            Paging[i].setOptions({
                lapping: lap,
                page: 1
            });
            Paging[i].setPage(); // reads options and redraw contents
        }
        $('.lapping').html(lap);
    }
 
    window.setPageStyle = function(style) {
 
        $("link").each(function() {
 
            var href = this.getAttribute('href');
 
            if (href && href.substr(0, "/static/pagination/".length) == "/static/pagination/") {
                this.setAttribute('href', '/static/pagination/' + style + ".css");
            }
        });
    }
 
    $(function() {
 
 
        /* First example, using a colorized list */
 
        var k = 0;
 
        CONT     = $('#content div.element'),
 
        TABLE    = $('#table tr'),
        B1       = $('#b1'),
        B2       = $('#b2'),
        STAT     = $('#stat'),
 
        CONT.each(function() {
            $(this).css('color', $.xcolor.gradientlevel('#f00', 'hsb(216,180,100)', k++, CONT.length));
        });
 
        Paging[0] = $(".a .toppagination").paging(CONT.length, {
            onSelect: function() {
 
                var data = this.slice;
 
                CONT.slice(Prev[0], Prev[1]).css('display', 'none');
                CONT.slice(data[0], data[1]).fadeIn("slow");
 
                Prev = data;
 
                return true; // locate!
            },
            onFormat: function (type) {
 
                switch (type) {
 
                    case 'block':
 
                        if (!this.active)
                            return '<span class="disabled">' + this.value + '</span>';
                        else if (this.value != this.page)
                            return '<em><a href="#' + this.value + '">' + this.value + '</a></em>';
                        return '<span class="current">' + this.value + '</span>';
 
                    case 'right':
                    case 'left':
 
                        if (!this.active) {
                            return '';
                        }
                        return '<a href="#' + this.value + '">' + this.value + '</a>';
 
                    case 'next':
 
                        if (this.active) {
                            return '<a href="#' + this.value + '" class="next">Next &raquo;</a>';
                        }
                        return '<span class="disabled">Next &raquo;</span>';
 
                    case 'prev':
 
                        if (this.active) {
                            return '<a href="#' + this.value + '" class="prev">&laquo; Previous</a>';
                        }
                        return '<span class="disabled">&laquo; Previous</span>';
 
                    case 'first':
 
                        if (this.active) {
                            return '<a href="#' + this.value + '" class="first">|&lt;</a>';
                        }
                        return '<span class="disabled">|&lt;</span>';
 
                    case 'last':
 
                        if (this.active) {
                            return '<a href="#' + this.value + '" class="prev">&gt;|</a>';
                        }
                        return '<span class="disabled">&gt;|</span>';
 
                    case 'fill':
                        if (this.active) {
                            return "...";
                        }
                }
                return ""; // return nothing for missing branches
            },
            format: '[<   ncnnn!  >]',
            perpage: 3,
            lapping: 0,
            page: null // we await hashchange() event
        }),
 
 
        $(window).hashchange(function() {
 
            if (window.location.hash)
                Paging[0].setPage(window.location.hash.substr(1));
            else
                Paging[0].setPage(1); // we dropped "page" support and need to run it by hand
        });
 
        $(window).hashchange();
 
 
        /* Second example, using a table navigable via buttons */
 
 
        B1.click(function() {
            TabPage.setPage(CURTAB - 1);
        }),
 
        B2.click(function() {
            TabPage.setPage(CURTAB + 1);
        }),
 
        TabPage = $("#tabpage").change(function () {
            TabPage.setPage($(this).val());
        }).paging(100, {
            onSelect: function (page) {
 
                var k = this.slice[0];
                var data = this;
 
                TABLE.each(function(i) {
 
                    $(this).find("td").each(function(j){
 
                        if (j >= 1) {
 
                            if (k < data.number) {
                                var str = "";
 
                                if (0 === PRIME[k]) {
                                    // int
                                    this.style.color = '#ccc'
                                } else {
 
                                    this.style.color = '#000';
 
                                    if (PRIME[k] & 1) {
                                        // prime
                                        str+= 'P';
                                    }
 
                                    if (PRIME[k] & 2) {
                                        // fibonacci
                                        str+= 'F';
                                    }
 
                                    if (PRIME[k] & 4) {
                                        // perfect
                                        str+= 'E';
                                    }
 
                                    if (PRIME[k] & 8) {
                                        // 2^
                                        str+= "B";
                                    }
 
                                    if (PRIME[k] & 16) {
                                        // 10^
                                        str+= "T";
                                    }
                                }
 
                                this.innerHTML = "<span>" + k + "</span><sub> "+ str + "</sub>";
                            } else {
                                this.style.color = '#000';
                                this.innerHTML="<span>&nbsp;</span><sub></sub>";
                            }
 
                            ++k;
                        } else
                            this.innerHTML = '<span>' + (i + (40 - data.lapping) * (page - 1) / 4) + '</span>';
 
                    });
 
                });
 
 
                STAT.html('(' + this.slice[0] + ' - ' + (this.slice[1] - 1) + ')');
 
                return false; // don't locate!
            },
            onFormat: function (type) {
 
                switch (type) {
 
                    case 'prev':
                        CURTAB = this.page;
                        B1.attr('disabled', !this.active);
                        break;
 
                    case 'next':
                        CURTAB = this.page;
                        B2.attr('disabled', !this.active);
                        break;
 
                    case 'fill':
                        //STAT.html('(showing ' + (1 + this.start) + ' - ' + this.stop + ')');
                        break;
 
                    case 'block':
 
                        if (!this.active)
                            return '<option class="disabled">' + this.value + '</option>';
                        else if (this.value != this.page)
                            return '<option>' + this.value + '</option>';
                        return '<option style="font-weight:bold;" selected="selected">' + this.value + '</option>';
                }
                return "";
            },
            format: '<.> *',
            perpage: 40,
            lapping: 0,
            page: 0
        });
 
 
        /* Site navigation on the right hand side */
 
        var ok = 0, scroll = $('#scroll');
 
        scroll.find('a').each(function(i) {
            $(this).delay(i * 200).fadeIn((1 + i) * 300, function() {
 
                if (5 == ++ok) {
 
                    scroll.paging(5, {
                        page: 1,
                        perpage: 1,
                        format: 'nnnnn',
                        onFormat: function() {
 
                            if (this.page == this.value)
                                return '<a class="current"></a>';
                            return '<a ></a>';
                        },
                        onSelect: function(page) {
 
                            if (window.SCROLLED)
                                $.scrollTo('#ex' + page, 800, {
                                    easing:'easeOutBounce'
                                });
                            window.SCROLLED = 1;
                            return false;
                        }
                    });
                }
 
 
            });
        });
 
 
        /* Example three, a public flickr stream navigation */
 
        var selectedImg = null;
 
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
            tags: "city,nature",
            format: "json"
        },
        function(data) {
 
            $.each(data.items, function(i, item) {
 
 
                var rotateCSS = 'rotate(' + (Math.random() * 30 - 15) + 'deg)';
 
                $("<img/>")
                    .attr('src', item.media.m)
                    .css({
                        '-moz-transform': rotateCSS,
                        '-webkit-transform': rotateCSS,
                        '-o-transform': rotateCSS,
                        'transform': rotateCSS
                    })
                    .css('top', i * 10 + "px")
                    .appendTo("#images");
                 
            });
 
 
            $('#imagepager').paging(20,{
 
                onSelect: function(page) {
 
                    $("#imageshadow").animate({
                        left: ((page-1)*19-2) + "px"
                    });
 
 
                    if (null !== selectedImg) {
                        $('#images').find("img").eq(selectedImg).animate({
                            left: '0px'
                        }, function() {
                            $('#images').find("img").eq(page-1).animate({
                                left: '400px'
                            });
                        });
                    } else {
                        $('#images').find("img").eq(page-1).animate({
                            left: '400px'
                        });
                    }
 
                    selectedImg = page-1;
 
                    return false;
                },
                onFormat: function() {
 
                        if (this.value != this.page)
                            return '<a style="left:'+((this.pos-1)*19)+'px;" href="#' + this.value + '"></a>';
                        return '<span style="left:'+((this.pos-1)*19)+'px;background-color:#fc0;"></span>';
                },
                format: '*',
                perpage: 1,
                page:1
            });
 
        });
 
 
 
 
var formats = [
 
'{ // First < > Last 1 2  50 51 52 53 54 55 ... 142 143\n\
    number: 1000,\n\
    options: {\n\
        format: "[ < > ] . (qq -) nnncnnn (- pp)",\n\
        lapping: 1,\n\
        perpage: 8,\n\
    },\n\
    labels: {\n\
        first: "First",\n\
        leap: " &nbsp; ",\n\
        last: "Last",\n\
        prev: "<",\n\
        next: ">",\n\
        fill: "..."\n\
    }\n\
}',
'{// <prev 1 2 3 4 5 6 7 next>\n\
    number: 30,\n\
    options: {\n\
        format: "< nnnnnnn! >"\n\
    },\n\
    labels: {\n\
        prev: "&laquo; prev",\n\
        next: "next &raquo;"\n\
    }\n\
}',
'{// < > 1 2 3 4 5 6 7 8\n\
    number: 4,\n\
    options: {\n\
        format: "<> nnnnnnnnn",\n\
        perpage: 1\n\
    },\n\
    labels: {\n\
        prev: "&lt;",\n\
        next: "&gt;"\n\
    }\n\
}',
'{// |<< <Prev - 1 2 3 4 - Next> >>|\n\
    number: 50,\n\
    options: {\n\
        format: "[< - nncn - >]"\n\
    },\n\
    labels: {\n\
        first: "|&lt;&lt;",\n\
        last: "&gt;&gt;|",\n\
        prev: "&lt; Prev",\n\
        next: "Next &gt;",\n\
        fill: " - ",\n\
    }\n\
}',
'{// PAGE 1 OF 1122 < 1 2 3 4 5 6 7 8 ... 1121 1122  >\n\
    number: 11220,\n\
    options: {\n\
        format: "- < (qq -) ncnnnnnn (- pp) >"\n\
    },\n\
    labels: {\n\
        fill: function(data) {\n\
            if (data.pos > 1)\n\
                return "...";\n\
            return "PAGE " + data.page + " OF " + data.pages;\n\
        },\n\
        prev: "&lt;",\n\
        next: "&gt;"\n\
    }\n\
}',
'{// <Older | Newer>\n\
    number: 50,\n\
    options: {\n\
        format: ". < - >"\n\
    },\n\
    labels: {\n\
        leap: function(data) {\n\
            return "PAGE " + data.page + " OF " + data.pages;\n\
        },\n\
        fill: " | ",\n\
        prev: "&ltOlder",\n\
        next: "Newer&gt;"\n\
    }\n\
}',
'{// <Back | Page: 1 ... 4 5 6 7 | Forward>\n\
    number: 341,\n\
    options: {\n\
        format: "< . (q -) nnnnn (- p) . >"\n\
    },\n\
    labels: {\n\
        leap: function(data) {\n\
            if (data.pos == 1)\n\
                return " | Page: " + data.page + " ";\n\
            return " | ";\n\
        },\n\
        fill: "...",\n\
        prev: "&lt;Back",\n\
        next: "Forward&gt;"\n\
    }\n\
}',
'{// 1 2 3 4 5 6 7 8 9 10 Next\n\
    number: 50,\n\
    hideInactive: true,\n\
    options: {\n\
        format: "< * >"\n\
    },\n\
    labels: {\n\
        prev: "Prev",\n\
        next: "Next"\n\
    }\n\
}',
'{// o o o o o x o o o\n\
    number: 99,\n\
    options: {\n\
        format: "*",\n\
    },\n\
    labels: {\n\
        current: "x",\n\
        number: "o"\n\
    }\n\
}',
'{// prev [1-25][26-50][51-75][76-100] next\n\
    number: 57,\n\
    options: {\n\
        format: "< * >"\n\
    },\n\
    labels: {\n\
        prev: "prev",\n\
        next: "next",\n\
        current: function(data) {\n\
            var u, l = 1 + (u = data.value * (data.perpage - data.lapping) + data.lapping) - data.perpage;\n\
                u = Math.min(u, data.number);\n\
            return "<strong>[" + l + "-" + u + "]</strong>";\n\
        },\n\
        number: function(data) {\n\
            var u, l = 1 + (u = data.value * (data.perpage - data.lapping) + data.lapping) - data.perpage;\n\
                u = Math.min(u, data.number);\n\
            return "[" + l + "-" + u + "]";\n\
        }\n\
    }\n\
}'];
 
 
 
        $("#formatlinks a").each(function(i) {
 
            $(this).click(function() {
 
                $("#formatex").val(formats[i]);
                ForExCB.apply($("#formatex"));
            });
 
        });
 
        function parseOptions(value) {
 
            try {
                var res = eval("(" + value + ")");
                $("#formatex").css("background", "#fff");
            } catch(e) {
                $("#formatex").css("background", "#c00");
                return;
            }
 
            if (!(res.options && res.labels)) return;
 
            var ret = {
                raw: res,
                options: {
                lapping: 0,
                perpage: 10,
                onFormat: function (type) {
 
                        if (!this.active && res.hideInactive)
                            return "";
 
                    var value;
 
                    if (type == "block") {
                            if (this.value == this.page) {
                                if (typeof res.labels.current === "string")
                                    value = res.labels.current;
                                else if (typeof res.labels.current === "function")
                                    value = res.labels.current(this);
                            } else {
                                if (typeof res.labels.number === "string")
                                    value = res.labels.number;
                                else if (typeof res.labels.number === "function")
                                    value = res.labels.number(this);
                            }
                    } else {
                        if (typeof res.labels[type] === "string")
                            value = res.labels[type];
                        else if (typeof res.labels[type] === "function")
                            value = res.labels[type](this);
                    }
 
 
 
                    switch (type) {
 
                        case 'block':
                            if (!this.active)
                                return '<span class="disabled">' + (value || this.value) + '</span>';
                            else if (this.value != this.page)
                                return '<em><a href="#' + this.value + '">' + (value || this.value) + '</a></em>';
                            return '<span class="current">' + (value || this.value) + '</span>';
 
                        case 'right':
                        case 'left':
 
                            if (!this.active) {
                                return '';
                            }
                            return '<a href="#' + this.value + '">' + (value || this.value) + '</a>';
 
                        case 'next':
 
                            if (this.active) {
                                return '<a href="#' + this.value + '" class="next">' + (value || 'Next &raquo;') + '</a>';
                            }
                            return '<span class="disabled">' + (value || 'Next &raquo;') + '</span>';
 
                        case 'prev':
 
                            if (this.active) {
                                return '<a href="#' + this.value + '" class="prev">' + (value || '&laquo; Previous') + '</a>';
                            }
                            return '<span class="disabled">' + (value || '&laquo; Previous') + '</span>';
 
                        case 'first':
 
                            if (this.active) {
                                return '<a href="#' + this.value + '" class="first">' + (value || '|&lt;') + '</a>';
                            }
                            return '<span class="disabled">' + (value || "|&lt;") + '</span>';
 
                        case 'last':
 
                            if (this.active) {
                                return '<a href="#' + this.value + '" class="prev">' + (value||"&gt;|") + '</a>';
                            }
                            return '<span class="disabled">' + (value||"&gt;|") + '</span>';
 
                        case "leap":
                        case 'fill':
                            if (this.active) {
                                return value||"...";
                            }
                    }
                    return ""; // return nothing for missing branches
                },
                onSelect: function() {
                    return false;
                },
                page: 1,
                format: "[< nncnn > ]"
                },
                number: 100
            };
 
            $.extend(ret.options, res.options);
 
            if (res.options)
                ret.number = res.number;
 
            return ret;
        }
 
        var ForTPL = null, ForExCB, ForExample = $("#formatex");
 
        ForExample.ready(ForExCB = function() {
 
            var tmp;
 
            if (ForTPL === null) {
                ForTPL = document.getElementById("forpaging").innerHTML;
                $("#forpaging").addClass("prettyprint");
 
                tmp = parseOptions(formats[0]);
 
            } else {
                tmp = parseOptions($(this).val());
            }
 
            if (tmp) {
                ForPaging.setOptions(tmp.options);
                ForPaging.setNumber(tmp.number)
                ForPaging.setPage(tmp.page);
 
                var tpl = ForTPL.replace(/\[\[\[number\]\]\]/g, tmp.number)
                                .replace(/\[\[\[format\]\]\]/g, tmp.options.format)
                                .replace(/\[\[\[perpage\]\]\]/g,tmp.options.perpage)
                                .replace(/\[\[\[page\]\]\]/g,   tmp.options.page)
                                .replace(/\[\[\[lapping\]\]\]/g,tmp.options.lapping);
 
                var alt = {
                    current: "' + this.value + '",
                    number: "' + this.value + '",
                    next: "Next >",
                    prev: "< Prev",
                    first: "|<",
                    last: ">|",
                    leap: "...",
                    fill: "..."
                };
 
                $("#forpaging").html(
                    tpl.replace(/\[\[(current|number|next|prev|first|last|leap|fill)\]\]/g, function() {
                        var m = RegExp.$1;
 
                        return (tmp.raw.labels[m] === undefined ? alt[m] : tmp.raw.labels[m]);
                    })
                );
 
                prettyPrint();
            }
 
        }).change(ForExCB).keyup(ForExCB);
 
        ForExample.val(formats[0]);
 
        var $opt = parseOptions(formats[0]);
 
        var ForPaging = $(".formatpagination").paging($opt.number, $opt.options);
 
    });
 
 
    // Generate the number table between page load and DOM-ready
 
    var i,j;
    for(i = 10000; i--; PRIME[i] = 1);
    for(i = 2; i <= 100; ++i)
        if (PRIME[i])
            for(j = i; j * i < 10000; ++j)
                PRIME[i * j] = 0;
 
    PRIME[0] = PRIME[1] = 2;
    j = [2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765];
 
    for (i = j.length; i--; PRIME[j[i]]|= 2);
 
    PRIME[6]|= 4;
    PRIME[28]|= 4;
    PRIME[496]|= 4;
    PRIME[8128]|= 4;
 
    for (i=1; i<10000; i<<=1) {
        PRIME[i]|= 8;
    }
 
    for (i=1; i<10000; i*=10) {
        PRIME[i]|= 16;
    }
 
})(jQuery, this);
 
</script>
</body>
</html>

ประวัติการแก้ไข
2012-05-25 12:18:46

Date : 2012-05-25 12:09:39

By : t-monroe

No. 6

Avrill.NET

โพสกระทู้ ( 480 )
บทความ ( 0 )

ทำได้แล้วค่ะ แต่ว่าลองใช้กับข้อมูลปริมาณมากที่ดึงมาจากฐานข้อมูล รู้สึกว่ามันโหลดช้าๆ มากๆ มันเกี่ยวกันไหมคะ
เหมือนมัน select ข้อมูลออกมาก่อนทั้งหมดแล้วค่อยมาแบ่ง

ประวัติการแก้ไข
2012-05-25 13:54:56

Date : 2012-05-25 13:53:42

By : Avrill

No. 7

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

ใช่ครับ ข้อเสียของสคริปต์พวกนี้ คงเป็นเรื่องการโหลดทั้งหมดก่อน แล้วค่อยแบ่งหน้า
ผมรบกวนฝากโค้ดของผมไปทดลองหน่อยน่ะครับ
พัฒนาเอง เพิ่งเสร็จเดี๋ยวนี้ล่ะครับ

Date : 2012-05-25 14:00:58

By : sakuraei

No. 8

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

Code (PHP)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>https://www.thaicreate.com/php/forum/078884.html - ใครมีตัวอย่าง Source code PHP แบ่งหน้า แล้ววางลิ้งไว้ได้ทั้งด้านบน-ล่าง บ้างคะ  </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="Unidentifier">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 <style>
 #nav{
    color:white;
    text-align:center;
    background-color:#6666ff;
    width:30px;
    display:inline-block;
    padding:5px;
    border:5px solid #dadada;
    -moz-border-radius: 15px;
    border-radius: 15px;
    cursor:default;
 }
 .pagination{
    background-color:#dadada;
    padding:10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 }
 </style>
  </head>
 
 <body>
 <script type="text/javascript"> 
$(document).ready(function(){
 
            var perpage=3;  // จำนวนรายการต่อหนึ่งหน้า          
            var allNum = $("div#content div.element").length;  // นับจำนวน ข้อมูลทั้งหมดว่ามีกี่ชุด         
            var paginator="";   // สร้าง navigator 
            for(i=1; i<=Math.round(parseInt(allNum)/parseInt(perpage)); i++){
                paginator += "<span id='nav'>"+i+"</span>";
            }
             
            $("div.pagination").each(function(){  // สร้าง navigator ที่ด้านบนและด้านล่างของหน้าจอ
                $(this).html(paginator);
            }); 
 
            // ทำการแทรก div เพื่อกำกับเลขหน้า  นับตามจำนวนรายการต่อหนึ่งหน้า
            var count=0,
            pagecount=1,
            regenerator="<div class='page"+pagecount+"' for='all'>";
            $("div#content div.element").each(function(){
                count++;
                regenerator += "<div>"+$(this).html()+"</div>";
                if(!(count%perpage)){
                    pagecount++;
                    regenerator +="</div><div class='page"+pagecount+"' for='all'>";
                }           
            });
            regenerator +="</div>";           
            $("div#content").empty().html(regenerator);
            $("div[for=all]").hide();   //ซ่อนข้อมูลทั้งหมดก่อน
            $("div.page1").show(400);   //แสดงเฉพาะหน้าที่ 1    
            //ดักการกดคีย์บอร์ดที่ navigator-page number ที่้ด้านบนและล่างของจอภาพ
            $("div.pagination span#nav").click(function(){                  
                    var index = $(this).text();                 
                    $("div[for=all]").hide(400);
                    $("div.page"+index).show(400);  
            });
             
});
 
 
</script>
<div id="test"></div>
<div id="exX">Examples</div>
 
<h3 id="ex2">Using Paging with multiple paginators</h3>
 
 
<h4>Average temperature of some cities in June</h4>
 
<div class="pagination"></div>
 
<div id="content">
 
<div class="element">
<h5>Las Vegas</h5>
<p>37°C / 98.6°F</p>
</div>
<div class="element">
<h5>Cairo</h5>
<p>35°C / 95°F</p>
</div>
<div class="element">
<h5>Houston</h5>
<p>33°C / 91.4°F</p>
</div>
<div class="element">
<h5>Madrid</h5>
<p>31°C / 87.8°F</p>
</div>
<div class="element">
<h5>Athens</h5>
<p>30°C / 86°F</p>
</div>
<div class="element">
<h5>Lisbon</h5>
<p>27°C / 80.6°F</p>
</div>
<div class="element">
<h5>Rome</h5>
<p>27°C / 80.6°F</p>
</div>
<div class="element">
<h5>Moscow</h5>
<p>23°C / 73.4°F</p>
</div>
<div class="element">
<h5>Los Angeles</h5>
<p>22°C / 71.6°F</p>
</div>
<div class="element">
<h5>San Francisco</h5>
<p>22°C / 71.6°F</p>
</div>
<div class="element">
<h5>Lima</h5>
<p>19°C / 66.2°F</p>
</div>
<div class="element">
<h5>Sydney</h5>
<p>18°C / 64.4°F</p>
</div>
<div class="element">
<h5>Johannesburg</h5>
<p>17°C / 62.6°F</p>
</div>
<div class="element">
<h5>Buenos Aires</h5>
<p>16° / 60.8°F</p>
</div>
</div>
 
<div class="pagination"></div>
 </body>
</html>

Date : 2012-05-25 14:03:00

By : sakuraei

No. 9

Avrill.NET

โพสกระทู้ ( 480 )
บทความ ( 0 )

แสดงว่าใช้กับพวกฐานข้อมูลเยอะๆไม่ได้

มีแบบที่ใช้กับ php mysql ไหมคะ ที่แบ่งหน้าแล้ว วางได้ทั้งบนและล่างแบบนี้

Date : 2012-05-25 14:45:25

By : Avrill

No. 10

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

ข้อมูลมากระดับไหนครับ หลักพัน หรือหลักหมื่นครับ

Date : 2012-05-25 14:51:22

By : sakuraei

No. 11

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

อาจจะทดลองตามนี้ครับ https://www.thaicreate.com/community/php-mysql-pagination.html

Date : 2012-05-25 14:55:31

By : sakuraei

No. 12

ultrasiam

โพสกระทู้ ( 1,268 )
บทความ ( 0 )

ข้อมูลเยอะก็แบ่งคิวรี่มาสิคะ ใช้ LIMIT เอา
การแบ่งหน้าก็แค่นับจำนวน record แล้วเอามาแบ่ง
ตอนแสดงข้อมูลก็ใส่ limit ตามหน้านั้น ๆ เข้าไป มันก็จะดึงมาทีละหน้าค่ะ
อย่างกำหนดไว้ว่า หน้าละ 10 record ก็คิวรี่ดึงมาแค่ 10 record
ถ้าโจทย์ในการแบ่งหน้าคือ ข้อมูลเยอะ โหลดช้า
ก็เลยแบ่งหน้าใหม่มันทำงานได้เร็วขึ้น ก็ต้องแบ่งการดึงข้อมูลด้วยค่ะ

เรื่องความสวยงามเรื่องปุ่ม css ช่วยได้ค่ะ

Date : 2012-05-25 15:01:48

By : ultrasiam

No. 13

Avrill.NET

โพสกระทู้ ( 480 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 12 เขียนโดย : ultrasiam เมื่อวันที่ 2012-05-25 15:01:48

รายละเอียดของการตอบ ::

.ถ้าแบ่งหน้าแบบธรรมดา แบบ limit เอา ทำได้อยู่ค่ะ พอดีว่าเราอยากได้แบบที่มี paginator ทั้งบน และ ล่าง ค่ะ
เลยลองใช้แบบ jQuery-paginator แต่พอข้อมูลเยอะๆ มันโหลดช้า

ขอบคุณที่แนะนำจ้า

Date : 2012-05-25 15:08:47

By : Avrill

No. 14

Avrill.NET

โพสกระทู้ ( 480 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 10 เขียนโดย : sakuraei เมื่อวันที่ 2012-05-25 14:51:22

รายละเอียดของการตอบ ::

..เท่าที่ลองดูแค่ประมาณ 300 เรคคอร์ด แคนี้ก็ช้าแล้วค่ะ

Date : 2012-05-25 15:10:42

By : Avrill

No. 15

PlaKriM

โพสกระทู้ ( 11,835 )
บทความ ( 10 )

มันไม่มีอันไหนใช้ได้ดีหรอกครับ ถ้าไม่ query หา result เอาทีละเพจ

Date : 2012-05-25 15:12:55

By : ikikkok

No. 16

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

Quote:
เท่าที่ผมลองดูที่ 400 เรคคอร์ด ก็ยังเร็วอยู่น่ะครับ

Date : 2012-05-25 15:21:10

By : sakuraei

No. 17

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

แต่ขอเวลาปรับแก้ไข เรื่องจำนวนหน้าที่มีมากๆ ให้เป็น 1 2 3 4 5 6 7 8 9 .... 20 30 40 50 Last
คิดว่าจะใช้ query ของ mysql ร่วมด้วย รับรองว่าไม่ช้าแน่นอนครับ

Date : 2012-05-25 15:23:43

By : sakuraei

No. 18

Avrill.NET

โพสกระทู้ ( 480 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 16 เขียนโดย : sakuraei เมื่อวันที่ 2012-05-25 15:21:10

รายละเอียดของการตอบ ::

ลองใน localhost อาจจะเร็วอยู่ค่ะ เราลองในโฮสจิงเลย เน็ตก็ไม่ช้านะ แต่เวลาโหลดแตกต่างกันเลย

Date : 2012-05-25 15:29:08

By : Avrill

No. 19

ultrasiam

โพสกระทู้ ( 1,268 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 13 เขียนโดย : Avrill เมื่อวันที่ 2012-05-25 15:08:47

รายละเอียดของการตอบ ::

แค่อยากจะบอกว่า paginator เนี่ยเราสร้างเองไว้ตรงไหนก็ได้ค่ะ ถ้า jquery มันช่วยไม่ได้จริงๆ ขอให้ค้นพบเร็ว ๆ นะคะ

Date : 2012-05-25 15:34:23

By : ultrasiam

No. 20

Unidentifier

โพสกระทู้ ( 3,156 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 18 เขียนโดย : Avrill เมื่อวันที่ 2012-05-25 15:29:08

รายละเอียดของการตอบ ::

ท่าจะจริงครับ อยู่ที่ความเร็วของโฮสท์ที่เราเอาไปฝากไว้

รบกวนช่วยทดสอบโค้ดของผมด้วยจะเป็นพระคุณอย่างมาก อยากรู้ว่าพอรันจริงบนโฮสท์จะอืดมากมั๊ย

ประวัติการแก้ไข
2012-05-25 15:38:03

Date : 2012-05-25 15:36:01

By : sakuraei

No. 21

PlaKriM

โพสกระทู้ ( 11,835 )
บทความ ( 10 )

หลักร้อยพอไปได้แน่นอนครับ รวมถึง colume ต้องน้อยด้วย ถึงได้บอกว่า ถ้า query ออกมาแล้ว fetch มาไว้ทั้งหมด ภาระหนักอึ้งทั้่ง server และ client ครับ ดีไม่ได้ timeout เอา

วิธีที่ดีหน่อยก็คงต้องใช้ limit ใน mysql คือ get result ทีละหน้า แต่ count record บอกมาด้วยว่าทั้งหมดเท่าไหร่ เพื่อเอาไปแสดง paging ครับ

ขอมูลเยอะๆ ลองมาแล้ว เดี้ยงครับ ต่อให้ Localhost ก็เหอะ ใช้พวก cache อะไรต่างๆ มาช่วยก็ช่วยได้นิดหน่อยครับ

จากประสบการณ์ ฟังธงว่าไม่ควรทำวิธีนี้ครับ ถ้าข้อมูลเยอะขนาดนั้น แล้วควรจะทำระบบ cache หรือว่า backup ข้อมูลเก่าๆ ออกไปที่อื่นซะ จะได้เร็วขึ้นนะครับ

Date : 2012-05-25 15:49:24

By : ikikkok

No. 22

Avrill.NET

โพสกระทู้ ( 480 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 20 เขียนโดย : sakuraei เมื่อวันที่ 2012-05-25 15:36:01

รายละเอียดของการตอบ ::

.ทดสอบแล้วค่ะ ค่อนข้างช้าเหมือนกันค่ะ

Date : 2012-05-25 16:00:05

By : Avrill

No. 23

Avrill.NET

โพสกระทู้ ( 480 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 19 เขียนโดย : ultrasiam เมื่อวันที่ 2012-05-25 15:34:23

รายละเอียดของการตอบ ::

.ขอบคุณค่ะ ที่แนะนำ ลองหาใน google ก็มีแต่แบบวางไว้ด้านล่างอย่างเดียวเลย หาดูที่เป็นแบบ บนและล่าง ไม่ค่อยมี หรือว่าเราหาไม่เป็น

Date : 2012-05-25 16:04:49

By : Avrill

No. 24

Avrill.NET

โพสกระทู้ ( 480 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 21 เขียนโดย : ikikkok เมื่อวันที่ 2012-05-25 15:49:24

รายละเอียดของการตอบ ::

ขอบคุณที่แนะนำค่ะ

Date : 2012-05-25 16:06:23

By : Avrill

No. 25

ranarong

โพสกระทู้ ( 1,242 )
บทความ ( 13 )

Pagination

Date : 2012-05-26 13:33:58

By : nautilus

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ใครมีตัวอย่าง Source code PHP แบ่งหน้า แล้ววางลิ้งไว้ได้ทั้งด้านบน-ล่าง บ้างคะ (มีรูป)

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Registered : 109,038

document.write("<font color=996600>[PHP]</font>"); [PHP] ใครมีตัวอย่าง Source code PHP แบ่งหน้า แล้ววางลิ้งไว้ได้ทั้งด้านบน-ล่าง บ้างคะ (มีรูป)

No. 1

No. 2

No. 3

No. 4

No. 5

No. 6

No. 7

No. 8

No. 9

No. 10

No. 11

No. 12

No. 13

No. 14

No. 15

No. 16

No. 17

No. 18

No. 19

No. 20

No. 21

No. 22

No. 23

No. 24

No. 25

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice

[PHP] ใครมีตัวอย่าง Source code PHP แบ่งหน้า แล้ววางลิ้งไว้ได้ทั้งด้านบน-ล่าง บ้างคะ (มีรูป)