• 周蓬安.blog的博客—强国博客—人民网 2019-05-10
  • 紫光阁中共中央国家机关工作委员会 2019-05-10
  • 感触名家笔下的端午文化吃香粽原来可以这样文艺 2019-05-09
  • 追梦夺冠游行嘲讽詹皇 百万人面前穿订制T恤羞辱他 2019-04-27
  • 《瘟疫传说》:黑死病恐怖 姐弟在绝望中求生 2019-04-10
  • 陕西国防工业职业技术学院百名大学生志愿者敬老院慰问孤寡老人陕西国防工业职业技术学院百名大学生志愿者敬老院慰问-陕西教育新闻 2019-04-08
  • 西藏拉萨:新家园 新生活 2019-04-08
  • 尊重和保障宗教信仰自由的中国实践 2019-04-06
  • 一敬泯恩仇 俄罗斯队主帅这个动作太暖了 2019-03-20
  • 四大名著剧组首次同台忆往事 经典影视剧如何铸就? 2018-12-07
  • “天眼”凝望 探秘宇宙 2018-12-07
  • 0

    使用 PHP,MySQL 和 jQuery 进行分页

    Posted by 撒得一地 on 2016年5月18日 in PHP笔记
    国外稳定加速器推荐    Express | Vypr

    分页是任何 web 项目的重要组成部分,一般根据分页页数请求,然后从数据库中列出符合分页的记录。在本文章中,我们将使用 PHP,MySQL 和 jQuery,告诉你简单的方式实现分页。

    本教程实例包含三个 PHP 文件,一个 CSS 文件和两个 JavaScript 文件,包括 jQuery 插件。

    1.数据库表

    -- Table structure for table `employee`
    --
    CREATE TABLE IF NOT EXISTS `employee` (
    `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key',
    `employee_name` varchar(255) NOT NULL COMMENT 'employee name',
    `employee_salary` double NOT NULL COMMENT 'employee salary',
    `employee_age` int(11) NOT NULL COMMENT 'employee age',
    PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=58 ;
    --
    -- Dumping data for table `employee`
    --
    
    INSERT INTO `employee` (`id`, `employee_name`, `employee_salary`, `employee_age`) VALUES
    (1, 'Tiger Nixon', 320800, 61),
    (2, 'Garrett Winters', 170750, 63),
    (3, 'Ashton Cox', 86000, 66),
    (4, 'Cedric Kelly', 433060, 22),
    (5, 'Airi Satou', 162700, 33),
    (6, 'Brielle Williamson', 372000, 61),
    (7, 'Herrod Chandler', 137500, 59),
    (8, 'Rhona Davidson', 327900, 55),
    (9, 'Colleen Hurst', 205500, 39),
    (10, 'Sonya Frost', 103600, 23);
    

    2.数据库连接: config.php

    这是一个配置文件来使进行 MySQL 数据库连接。必须更改主机名(host)、用户名(user)、 密码(password)和数据库名称。

    <?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "phpzag_demos";
    $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
    
    if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
    }
    ?>
    

    3.PHP 代码: pagination.php

    这是用于显示分页记录的用户界面。

    <?php
    include('config.php');
    $per_page = 10;
    
    //Calculating no of pages
    $sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee";
    $result = mysqli_query($conn, $sql);
    $count = mysqli_num_rows($result);
    $pages = ceil($count/$per_page)
    ?>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery_pagination.js"></script>
    <link rel='stylesheet' href='style.css' type='text/css' />
    <div id="loading" ></div>
    <div id="content" ></div>
    <ul id="pagination">
    
    <?php
    //Pagination Numbers
    for($i=1; $i<=$pages; $i++)
    {
    echo '<li id="'.$i.'">'.$i.'</li>';
    }
    ?>
    </ul>
    

    4.PHP 代码: pagination_data.php

    这是一个简单的 PHP 文件来显示雇员表中的数据。此文件调用 jQuery 文件 (jquery_pagination.js) 来加载雇员记录。

    <?php
    include('config.php');
    $per_page = 10;
    if($_GET)
    {
    $page=$_GET['page'];
    }
    
    $start = ($page-1)*$per_page;
    $sql = "select * from employee order by id limit $start,$per_page";
    $result = mysqli_query($conn, $sql);
    ?>
    
    <table width="800px">
    <?php
    while($row = mysqli_fetch_array($result))
    {
    $id=$row['id'];
    $emp_name=$row['employee_name'];
    $employee_salary=$row['employee_salary'];
    $employee_age=$row['employee_age'];
    ?>
    <tr>
    <td><?php echo $id; ?></td>
    <td><?php echo $emp_name; ?></td>
    <td><?php echo $employee_salary; ?></td>
    <td><?php echo $employee_age; ?></td>
    </tr>
    <?php
    }
    ?>
    </table>
    

    5.JS 代码: jquery_pagination.js

    这是一个 JavaScript 文件,就像一个要从服务器加载记录的数据控制器。

    $(document).ready(function() {
    //Hide Loading Image
    function Hide_Load() {
    $("#loading").fadeOut('slow');
    };
    
    //Default Starting Page Results
    $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
    $("#content").load("pagination_data.php?page=1", Hide_Load());
    
    //Pagination Click
    $("#pagination li").click(function(){
    
    //CSS Styles
    $("#pagination li").css({'border' : 'solid #dddddd 1px'}).css({'color' : '#0063DC'});
    $(this).css({'color' : '#FF0084'}).css({'border' : 'none'});
    
    //Loading Data
    var pageNum = this.id;
    $("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
    });
    });
    

    6.CSS 代码:Style.css

    这是用于显示分页的 CSS 代码。

    .pagination{
    float:left;
    width:100%;
    }
    
    .botoom_link{
    float:left;
    width:100%;
    }
    
    .content{
    float:left;
    width:100%;
    }
    
    ul {
    list-style: none;
    float:left;
    margin:0;
    padding: 0;
    }
    
    li{
    list-style: none;
    float: left;
    margin-right: 16px;
    padding:5px;
    border:solid 1px #dddddd;
    color:#0063DC;
    }
    
    li:hover{
    color:#FF0084;
    cursor: pointer;
    }
    

    代码百度云盘下载://pan.baidu.com/s/1c1GmVRi

    上一篇:

    下一篇:

    相关推荐

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    8 + 8 = ?

    网站地图|广东快乐10分开奖直播

    Copyright © 2015-2019 广东快乐10分开奖直播 All rights reserved.
    闽ICP备15015576号-1,版权所有?psz.

  • 周蓬安.blog的博客—强国博客—人民网 2019-05-10
  • 紫光阁中共中央国家机关工作委员会 2019-05-10
  • 感触名家笔下的端午文化吃香粽原来可以这样文艺 2019-05-09
  • 追梦夺冠游行嘲讽詹皇 百万人面前穿订制T恤羞辱他 2019-04-27
  • 《瘟疫传说》:黑死病恐怖 姐弟在绝望中求生 2019-04-10
  • 陕西国防工业职业技术学院百名大学生志愿者敬老院慰问孤寡老人陕西国防工业职业技术学院百名大学生志愿者敬老院慰问-陕西教育新闻 2019-04-08
  • 西藏拉萨:新家园 新生活 2019-04-08
  • 尊重和保障宗教信仰自由的中国实践 2019-04-06
  • 一敬泯恩仇 俄罗斯队主帅这个动作太暖了 2019-03-20
  • 四大名著剧组首次同台忆往事 经典影视剧如何铸就? 2018-12-07
  • “天眼”凝望 探秘宇宙 2018-12-07
  • 天津时时彩多少期 中国福彩网3d 老时时彩官网 北京赛车pk10跑车连接 极速快3历史开奖结果 中国福彩网官 重庆时时彩蚂蚁博士 中国体彩顶呱刮官网 多乐彩推荐 真钱二八杠 腾讯分分彩单双怎么看 pk10牛牛害人 福彩中心老时时彩 四川时时彩直播 北京pk10有正规网站吗 北京pk10官网