使用 jQuery 和 Bootstrap Table 插件来初始化一个表格,php文件中从数据库中取到了数据,并且以json数据形式输出,前端接收展示,但是前端代码好像连接不上php文件是什么原因

6,233次阅读
没有评论

共计 3420 个字符,预计需要花费 9 分钟才能阅读完成。

html:

   

   

   

Document

   

   

   

   

   

   

   

   

   

   

   

        $(function () {

            // ?????

            Date.prototype.Format = function (fmt) {

                var o = {

                    “M+”: this.getMonth() + 1, //??

                    “d+”: this.getDate(), //?

                    “H+”: this.getHours(), //??

                    “m+”: this.getMinutes(), //?

                    “s+”: this.getSeconds(), //?

                    “q+”: Math.floor((this.getMonth() + 3) / 3), //??

                    “S”: this.getMilliseconds() //??

                };

                if (/(y+)/.test(fmt))

                    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + “”).substr(4 – RegExp.$1.length));

                for (var k in o)

                    if (new RegExp(“(” + k + “)”).test(fmt))

                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : ((“00” + o[k]).substr((“” + o[k]).length)));

                return fmt;

            }

            $(‘#table’).bootstrapTable({

                method: ‘get’,

                toolbar: ‘#toolbar’,    //?????????

                striped: true,      //????????

                cache: false,      //??????????true???????????????????*?

                pagination: true,     //???????*?

                sortable: true,      //??????

                sortOrder: “asc”,     //????

                pageNumber: 1,      //??????????????

                pageSize: 20,      //????????*?

                pageList: [20, 50, 100],  //???????????*?

                url: ‘select.php’,

                queryParamsType: ‘limit’, //???? ‘limit’ ,?????? ??????????offset,limit,sort???? ”  ????????????????pageSize,pageNumber

                queryParams: queryParams,//????????????????????????????????????????????????

                pagination: true,

                sidePagination: “server”,   //?????client??????server??????*?

                //search: true,      //?????????????????????????????????????

                strictSearch: true,

                showColumns: false,     //????????

                showRefresh: false,     //????????

                minimumCountColumns: 2,    //???????

                clickToSelect: true,    //?????????

                searchOnEnterKey: true,

                columns: [{

                    field: ‘ChromosomeName’,

                    title: ‘ChromosomeName’,

                    align: ‘center’,

                    width: ‘15%’,

                    sortable: true,

                    formatter: function (value, row, index) {

                        return “” + value + ““;

                    }

                }, {

                    field: ‘GeneID’,

                    title: ‘GeneID’,

                    width: ‘15%’,

                    align: ‘center’,

                    sortable: true

                }, {

                    field: ‘StartLocation’,

                    title: ‘StartLocation’,

                    width: ‘15%’,

                    align: ‘center’,

                    sortable: true

                }, {

                    field: ‘EndLocation’,

                    title: ‘EndLocation’,

                    width: ‘15%’,

                    align: ‘center’,

                    sortable: true

                }]

            });

            $(“#geneId”).keyup(function (event) {

                if (event.keyCode == 13) {

                    search();

                }

            });

        });

        function queryParams(params) {//????  

            var temp = {

                pageNumber: params.pageNumber,

                pageSize: params.pageSize,

                sortName: params.sortName,      //????  

                sortOrder: params.sortOrder, //?????desc?asc?

                geneId: $(“#geneId”).val()

            };

            return temp;

        }

        function search() {

            var geneId = $(“#geneId”).val()

            if (geneId == null || geneId == “”) {

                alert(“please input gene ID”);

            }

            else {

                $(“#table”).bootstrapTable(‘refresh’);

            }

        }

   

php:

// 设置响应头为 JSON 格式

header(‘Content-Type: application/json’);

// 连接数据库(这里以 MySQL 为例,使用 mysqli 扩展)

$servername = “localhost”;

$username = “root”;

$password = “root”;

$dbname = “test”;

$connection = new mysqli($servername, $username, $password, $dbname);

if ($connection->connect_error) {

    die(“Connection failed: “. $connection->connect_error);

}

// 获取请求参数

$pageNumber = isset($_GET[‘pageNumber’])? $_GET[‘pageNumber’] : 1;

$pageSize = isset($_GET[‘pageSize’])? $_GET[‘pageSize’] : 20;

$sortName = isset($_GET[‘sortName’])? $_GET[‘sortName’] : null;

$sortOrder = isset($_GET[‘sortOrder’])? $_GET[‘sortOrder’] : ‘asc’;

$geneId = isset($_GET[‘geneId’])? $_GET[‘geneId’] : null;

// 构建 SQL 查询语句

$sql = “SELECT * FROM gene”;

$whereConditions = [];

if ($geneId!== null) {

    $whereConditions[] = “geneId LIKE ‘%$geneId%'”;

}

if (!empty($whereConditions)) {

    $sql.= ” WHERE “. implode(” AND “, $whereConditions);

}

if ($sortName!== null) {

    $sql.= ” ORDER BY $sortName “. ($sortOrder === ‘asc’? ‘ASC’ : ‘DESC’);

}

$sql.= ” LIMIT “. (($pageNumber – 1) * $pageSize). “, “. $pageSize;

$result = $connection->query($sql);

$data = [];

if ($result->num_rows > 0) {

    while ($row = $result->fetch_assoc()) {

        $data[] = $row;

    }

}

// 获取总记录数用于分页

$totalCountSql = “SELECT COUNT(*) AS total FROM gene”;

if ($geneId!== null) {

    $totalCountSql.= ” WHERE geneId LIKE ‘%$geneId%'”;

}

$totalCountResult = $connection->query($totalCountSql);

$totalCountRow = $totalCountResult->fetch_assoc();

$totalCount = $totalCountRow[‘total’];

// 关闭数据库连接

$connection->close();

// 返回 JSON 格式的数据

echo json_encode([

    ‘total’ => $totalCount,

    ‘rows’ => $data

]);

?>

原文地址: 使用 jQuery 和 Bootstrap Table 插件来初始化一个表格,php 文件中从数据库中取到了数据,并且以 json 数据形式输出,前端接收展示,但是前端代码好像连接不上 php 文件是什么原因

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-10-23发表,共计3420字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)