Question

我正在尝试使用mySQL对数据进行分页。我了解了极限，然后发现了偏移量。我有一个按钮，该按钮指示下一个，另一个按钮指示前一个。我希望下一个跳转到下一个12条记录，再跳到之前的12条记录。

我该如何动态获取当前位于我app.js文件中的路由

//TESTING
app.get('/clients/:page', function(req, res){
    var x = req.params.page;
    console.log(x * 12);//This shows correctly
    var offset = x * 12;
    var q = `Select * from clients ORDER BY LAST_NAME limit 12 offset ${offset}`;
    console.log(q);//This shows correctly
    console.log(req.params.page);
    connection.query(q, function (error, results, fields) {
        if (error) throw error;
        var clients = results;
        console.log(clients[0].first_name);
        res.render('clients', {clients: clients});
    });

});

在我的client.ejs文件中

<div class="background-image"></div>
   <h2>Clients</h2>
   <div id="back-forward"> 
   <button id="back"> << Back</button>
   <input type="text" placeholder="search by Last Name" style="width: 200px">
   <button>Search</button>
   <button id="forward"> Forward >> </button>

 </div> 
 <ul> 
   <% for (var i = 0; i < clients.length; i++) { %>
   <div id="client">
     <li id="client-li"> <%= clients[i].id %> - <%= clients[i].first_name %> : <%= clients[i].last_name %></li>
     <button>Edit / View</button>
  </div>

  <% } %> 
 </ul>
 <script src="../public/js/jquery-3.3.1.min.js"></script>
 <script src="../public/js/clients.js"></script>
</body>
</html>

目前，我的clients.js文件非常简单：

var page;

$(function() {
    $("#forward").click(function (e) { 
        e.preventDefault();
        $("#back").css("opacity", "1");

        // console.log(page);
        if (page === undefined) {
            page = 1;
            // console.log(page);
        } else {
            page++;   
        }
        console.log(page);
        var url = '/clients/' + page;
        $.get(url, function(data){
            console.log(data);//PLEASE SEE COMMENT BELOW

        });
    });
});

console.log语句-console.log（data）; //请在下面显示注释，显示我的整个页面（包括HTML）以及正确的数据，换句话说，它显示了接下来的12个项目，但未呈现在该页面上：请参阅console.log（data）：-ul中的数据是100％正确的。

1
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../public/styles/dashboard.css">
    <link rel="stylesheet" href="../public/styles/clients.css">
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>
    <title>Clients</title>
</head>
<body>
    <header>
        <h2 ><a href="/"><i class="fas fa-crow"></i>Robin Trust</a> </h2>
        <nav>
            <li><a href="/dashboard">Dashboard</a> </li>
            <li><a href="/carers">Carer's</a> </li>
            <li><a href="/shifts">Shifts</a> </li>
            <li><a href="#">Reports</a> </li>
            <li><a href="#">Administration</a> </li>
            <li><a href="http://www.digital-alchemy.solutions">Contact</a> </li>
        </nav>
    </header>
    <div class="background-image"></div>
    <h2>Clients</h2>
    <div id="back-forward">   
        <button id="back"> << Back</button>
        <input type="text" placeholder="search by Last Name" style="width: 200px">
        <button>Search</button>
        <form id="page-forward" action="/clients/:page" method="get">
            <button id="forward"> Forward >> </button>
        </form> 
    </div>  
    <ul>    
        <div id="client">
            <li id="client-li"> 304 - Kennedi : Cremin</li>
            <button>Edit / View</button>
        </div>
        <div id="client">
            <li id="client-li"> 286 - Alana : Dach</li>
            <button>Edit / View</button>
        </div>
        <div id="client">
            <li id="client-li"> 360 - Krystel : Daniel</li>
            <button>Edit / View</button>
        </div>
        <div id="client">
            <li id="client-li"> 323 - Dorian : Daugherty</li>
            <button>Edit / View</button>
        </div>
        <div id="client">
            <li id="client-li"> 295 - Lexi : Dickens</li>
            <button>Edit / View</button>
        </div>
        <div id="client">
            <li id="client-li"> 324 - Ladarius : Donnelly</li>
            <button>Edit / View</button>
        </div>
        <div id="client">
            <li id="client-li"> 315 - Angie : Effertz</li>
            <button>Edit / View</button>
        </div>
        <div id="client">
            <li id="client-li"> 242 - Marcia : Ernser</li>
            <button>Edit / View</button>
        </div>
        <div id="client">
            <li id="client-li"> 328 - Elinor : Ferry</li>
            <button>Edit / View</button>
        </div>
        <div id="client">
            <li id="client-li"> 270 - Brandi : Flatley</li>
            <button>Edit / View</button>
        </div>
        <div id="client">
            <li id="client-li"> 245 - Enos : Flatley</li>
            <button>Edit / View</button>
        </div>
        <div id="client">
            <li id="client-li"> 279 - Armando : Frami</li>
            <button>Edit / View</button>
        </div>
    </ul>
    <script src="../public/js/jquery-3.3.1.min.js"></script>
    <script src="../public/js/clients.js"></script>
</body>
</html>

我是Web编程和JQuery的新手，所以我肯定我缺少一些明显的东西。我已经用Google搜索过，但是也许我没有使用正确的语法进行搜索。

亲切的问候

韦恩

如何使用jQuery对我的mySQL查询进行分页

0 个答案: