今回は、ajax を使用してページング テクノロジを実装する手順について詳しく説明します (コード付き)。 。ajax ページング レンダリングは次のとおりです:
まず、HTML コードと CSS コードを見てみましょう。テーブルとフッターが必要です:
| 日期 | 时间 | 事件 | 报警画面 | 事件备注 |
|---|
跳转到 页
以下は CSS コードです:
#global{ position: relative; } #table{ position: absolute; top:19%; left:1.6%; width: 55%; } #table textarea{ width: 10vw; height: 10vh; background-color: transparent; color: #fff; border-width: 0; text-align: center; } table, th, td { border: 0.2px solid rgba(60,166,206,0.2); border-collapse: collapse; color:rgba(60,166,206,1); } th, td { padding: 3px; text-align: center; font-size: 1.6vmin; } td{ background: rgba(2,29,54,1); } th{ background: rgba(20,29,54,1); padding: 1.8% 0; color: rgba(255,255,255,0.8); } #footer{ position: absolute; bottom:5vh; left:7vw; text-align: center; color: rgba(60,166,206,1); } #pagination{ display: inline-block; } #pagination li{ display: inline; } #select{ display: inline-block; margin-left: 40px; } #select input[type="text"]{ width: 30px; height: 20px; background-color: #000; border-width: 1px; } #select input[type="button"]{ width: 40px; height: 23px; background: #000; border:none; } ul li{ cursor: pointer; }
開始日を初期化します。 、終了日、リクエスト ページ数、リクエストされたページ数、データが合計何ページあるかをバックエンドが提供するAPIデータインターフェースにajax経由で渡し、データベースからデータを取得します、そしてそれをフロントエンドに表示します:
var start_date = "2017-01-01", end_date = "2017-01-08"; var pageNo = 1; var pageSize = 4; var pages = 0;
テーブルのデータを取得してフロントエンドに追加する方法は?ページ分割されたデータを取得してフロントエンドに追加するにはどうすればよいですか?以下で定義した関数を使用します:
loadData(pageNo, pageSize);この関数が API データ インターフェイスとどのように通信するかを見てみましょう:
function loadData(pageNo, pageSize){ $(".detail").remove(); //每次重新从 API 数据接口获取数据都要先清除原先表格 `` 的内容 $.ajax({ url: "/history_alarm", type: "POST", data: JSON.stringify({date:date, page_num:pageNo, page_size:pageSize}), success:function(result){ var results = JSON.parse(result); var list = results.alarm; var totalCount = results.alarm_count; pages = results.page_count; if(list.length != 0){ for(var i=0; i
ログイン後にコピー
loadData 関数では、他の 3 つの関数も定義しました。まず appendData を見てください:
//注意到我们将 `alarm_id` 作为 `'+'
';; $("#table table").append(text); }
//该函数定义了如何通过 ajax 将用户输入到某一个 `