Datatables學習（二）ajax獲取資料

上一篇文章，講解了datatables的基本建立，這一講講解datatables通過ajax非同步獲取資料

1、前提準備

以一個圖書管理的表格為例，後臺java程式碼就不細說了，這裡主要講解前端
資料庫表結構如下:
這裡寫圖片描述

實體類

	package com.che.pri.entity;

	import java.util.Date;
	import javax.persistence.Column;
	import javax.persistence.Entity;
	import javax.persistence.GeneratedValue;
	import javax.persistence. 
Id;
	import javax.persistence.Table;

	@Entity
	@Table(name="t_book")
	public class Book {
		@Id
		@GeneratedValue
		private Integer id;
		@Column(length=100)
		private String name;
		@Column(length=50)
		private String author;
	
		private String date;
	
		private String image;
	
		public Integer getId 
() {
			return id;
		}
		public void setId(Integer id) {
			this.id = id;
		}
		public String getName() {
			return name;
		}
		public void setName(String name) {
			this.name = name;
		}
		public String getAuthor() {
			return author;
		}
		public void setAuthor(String author) {
			this.author = author; 

		}
		public String getDate() {
			return date;
		}
		public void setDate(String date) {
			this.date = date;
		}
		public String getImage() {
			return image;
		}
		public void setImage(String image) {
			this.image = image;
		}	
	
	}

這裡後臺使用的是mybatis操作資料庫

mapper層

	package com.che.pri.mapper;

	import java.util.List;
	import org.apache.ibatis.annotations.Delete;
	import org.apache.ibatis.annotations.Insert;
	import org.apache.ibatis.annotations.Mapper;
	import org.apache.ibatis.annotations.Select;
	import org.apache.ibatis.annotations.Update;
	import com.che.pri.entity.Book;

	public interface DataMapper {
	
		@Select("select * from t_book")
		List<Book> getData();
		
		@Delete("delete from t_book where id = #{id}")
		int delete(Book book);
		
		@Insert("insert into t_book(id,author,name,date) values(#{id},#{author},#{name},#{date})")
		int  insert(Book book);
		
		@Update("update t_book set author=#{author}, name=#{name},date=#{date} where id=#{id}")
		int update(Book book);
	}

controller層

	package com.che.pri.controller;

	import java.text.SimpleDateFormat;
	import java.util.Date;
	import java.util.HashMap;
	import java.util.List;
	import java.util.Map;
	import org.springframework.beans.factory.annotation.Autowired;
	import org.springframework.stereotype.Controller;
	import org.springframework.validation.BindingResult;
	import org.springframework.web.bind.annotation.PathVariable;
	import org.springframework.web.bind.annotation.PostMapping;
	import org.springframework.web.bind.annotation.RequestMapping;
	import org.springframework.web.bind.annotation.ResponseBody;
	import com.che.pri.bean.Data;
	import com.che.pri.entity.Book;
	import com.che.pri.mapper.DataMapper;

	@Controller
	@RequestMapping("/data")
	public class DataController {
	
		@Autowired
		private DataMapper dataMapper;
		
		@ResponseBody
		@RequestMapping(value = "/list")
		public Object list() {
			Map<String, Object> map = new HashMap<String, Object>();
			List<Book> list = dataMapper.getData();
			System.out.println(list);
			map.put("data", dataMapper.getData());
			return map;
		}
		
		@ResponseBody
		@RequestMapping(value = "/delete/{id}")
		public Object delete(@PathVariable String id) {
			Map<String, Object> map = new HashMap<String, Object>();
			Book book = new Book();
			book.setId(Integer.parseInt(id));
			int count = -1;
			count = dataMapper.delete(book);
			map.put("res", count);
			return map;
		}
		
		@ResponseBody
		@PostMapping(value = "/add")
		public Object add(Book book) {
			Map<String, Object> map = new HashMap<String, Object>();
			int count = -1;
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
			book.setDate(sdf.format(new Date()));
			count = dataMapper.insert(book);
			map.put("res", count);
			return map;
		}
		
		@ResponseBody
		@PostMapping(value = "/update")
		public Object update(Book book) {
			Map<String, Object> map = new HashMap<String, Object>();
			int count = -1;
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
			book.setDate(sdf.format(new Date()));
			count = dataMapper.update(book);
			map.put("res", count);
			return map;
		}
	}

從程式碼中可以看出，後臺一個提供了四個介面，list介面提供資料、delete介面刪除資料、add介面新增資料、update介面修改資料，有了這個後臺提供的增刪改查四個介面後，就可以開始datatables的ajax操作了

2、修改表格表頭結構

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title></title>
			<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
			<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
			<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript"></script>
		</head>
		<body>
			  <table id="table_id" class="display">
			    <thead>
			        <tr>
			            <th class="text-center">序號</th>
					    <th class="text-center">編號</th>
						<th class="text-center">作者</th>
			        </tr>
			    </thead>
			    <tbody>
			       
			    </tbody>
			</table>
			
			<script>
				$(document).ready( function () {
				    $('#table_id').DataTable();
				} );
			</script>
		</body>
	</html>

注意：這裡先給表格新增三列，另外兩列，圖片和新增時間後面再加上；其中 th標籤中的 class="text-center"為表頭居中。此時，表格樣式如下:
這裡寫圖片描述

3、修改樣式為中文

從上圖可以看出，表格的文字顯示為英文，現需要將其修改為中文顯示
需要在js檔案中新增如下程式碼

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title></title>
			<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
			<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
			<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript"></script>
		</head>
		<body>
			  <table id="table_id" class="display">
			    <thead>
			        <tr>
			            <th class="text-center">序號</th>
					    <th class="text-center">編號</th>
						<th class="text-center">作者</th>
			        </tr>
			    </thead>
			    <tbody>
			       
			    </tbody>
			</table>
			
			<script>
				$(document).ready( function () {
				    $('#table_id').DataTable({
				    	language : {
				    		"lengthMenu" : '每頁顯示<select>' + '<option value="10">10</option>'
													+ '<option value="20">20</option>'
													+ '<option value="30">30</option>'
													+ '<option value="40">40</option>'
													+ '<option value="50">50</option>' + '</select>條',
				    		"paginate" : {
												"first" : "首頁",
												"last" : "尾頁",
												"previous" : "上一頁",
												"next" : "下一頁"
											},
							"processing" : "載入中...",  //DataTables載入資料時，是否顯示‘進度’提示  
							"emptyTable" : "暫無資料",
							"info" : "共 _PAGES_ 頁  _TOTAL_ 條資料  ",
							"infoEmpty" : "暫無資料",
							"emptyTable" : "暫無要處理的資料...",  //表格中無資料
							"search": "搜尋:",
							"infoFiltered" : " —— 從  _MAX_ 條資料中篩選",
							"zeroRecords":    "沒有找到記錄"
											
				    	}
				    });
				} );
			</script>
		</body>

表格如下；
這裡寫圖片描述

4、新增ajax獲取資料

程式碼如下：

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title></title>
			<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
			<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
			<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript"></script>
		</head>
		<body>
			  <table id="table_id" class="display">
			    <thead>
			        <tr>
			            <th class="text-center">序號</th>
					    <th class="text-center">編號</th>
						<th class="text-center">作者</th>
			        </tr>
			    </thead>
			    <tbody>
			       
			    </tbody>
			</table>
			
			<script>
				$(document).ready( function () {
				    $('#table_id').DataTable({
				    	language : {
				    		"lengthMenu" : '每頁顯示<select>' + '<option value="10">10</option>'
													+ '<option value="20">20</option>'
													+ '<option value="30">30</option>'
													+ '<option value="40">40</option>'
													+ '<option value="50">50</option>' + '</select>條',
				    		"paginate" : {
												"first" : "首頁",
												"last" : "尾頁",
												"previous" : "上一頁",
												"next" : "下一頁"
											},
							"processing" : "載入中...",  //DataTables載入資料時，是否顯示‘進度’提示  
							"emptyTable" : "暫無資料",
							"info" : "共 _PAGES_ 頁  _TOTAL_ 條資料  ",
							"infoEmpty" : "暫無資料",
							"emptyTable" : "暫無要處理的資料...",  //表格中無資料
							"search": "搜尋:",
							"infoFiltered" : " —— 從  _MAX_ 條資料中篩選",
							"zeroRecords":    "沒有找到記錄"
											
				    	},
				    	ajax : "http://localhost:8089/data/list",	
				    	columns: [
				    	    {
						        "data": "id",
						        "name" : "id",
						        "sDefaultContent":"",  //預設空字串
						        "sClass": "text-center"
						    },
						    {
							    "orderable" : false,
								"data": "author",		        	
								'sClass': "text-center"		         		        	
							},		        
							{
								"orderable" : false,
								"data": "name",	        	
								'sClass': "text-center"	 	         	       	
							 }	        		           
				    	]
				    });
				} );
			</script>
		</body>
	</html>

其中：ajax : "http://localhost:8089/data/list", 為獲取資料；columns:為獲取到的資料在表格中的樣式；data後對應的字串為返回的json的鍵；

Datatables學習（二）ajax獲取資料

上一篇文章，講解了datatables的基本建立，這一講講解datatables通過ajax非同步獲取資料 1、前提準備以一個圖書管理的表格為例，後臺java程式碼就不細說了，這裡主要講解前端資料庫表結構如下: 實體類 package com.che.p

verilog學習（二）語法之資料基礎篇

一、關於模組 Verilog 的基本設計單元是“模組” （block）。一個模組是由兩部分組成的，一部分描述接口，另一部分描述邏輯功能，即定義輸入是如何影響輸出的。

Redis學習（二）Redis常用資料型別

常用資料型別字串特點（一）鍵都是字串型別（二）字串型別的值最大不能超過512MB 命令（一）批量設定值 mset key value [key value ... ] 時間複雜度：O（k）,k是鍵的個數（二）批量獲取值 mget key

verilog學習（二）語法之資料基礎

一、關於模組 Verilog 的基本設計單元是“模組” （block）。一個模組是由兩部分組成的，一部分描述接口，另一部分描述邏輯功能，即定義輸入是如何影響輸出的。如圖，verilo

JavaScript學習（二）：原始資料型別-字串、數字、布林值、null、undefined

資料型別 --- 能夠表示並操作值的型別，程式語言的最基本特性就是能夠支援多種資料型別。 JavaScript的資料型別分為兩種：原始型別（primitive type）物件型別（object type）原始資料型別包括：數字字串布林值，

JS學習（二）物件屬性的獲取和訪問

var array = ["one","two","three"];//陣列 var obj = {//物件 field : "self", printInfo : function (){

servlet學習（二）request物件獲取請求頭資訊

一、作用封存了當前請求的所有請求資訊二、使用獲取請求頭的資訊包括： 1.請求行：請求方式請求URL/URI 協議版本 //獲取請求行 String method=req.getMethod(); StringBuffer url=req.get

redis學習（二） redis資料結構介紹以及常用命令

redis資料結構介紹　　我們已經知道redis是一個基於key-value資料儲存的資料結構資料庫，這裡的key指的是string型別，而對應的value則可以是多樣的資料結構。其中包括下面五種型別：　　1.string 字串　　　string字串型別是redis最基礎的資料儲存型別。

MySQL學習（二）資料型別

擷取書中內容留作學習。。。。 1、整數型別 2、浮點數與定點數型別 3、日期時間型別　　向資料庫中插入當前系統時間：CURRENT_TIME或者NOW() 4、文字字串型別　　MySQL列舉型別：create table test(enm E

python資料分析新手入門課程學習——（二）探索分析與視覺化（來源：慕課網）

一，單因子與對比分析視覺化資料 import pandas as pd df = pd.read_csv('./HR.csv') #檢視前十條資料 df.head(10) 以下為顯示的結果我們可以看出：第一個屬性satisf

機器學習實踐（二）—sklearn之資料集

一、可用資料集 Kaggle網址：https://www.kaggle.com/datasets UCI資料集網址： http://archive.ics.uci.edu/ml/ scikit-learn網址：http://scikit-learn.org/sta

vue 雙向資料繫結的實現學習（二）- 監聽器的實現

廢話：上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue實現的基本實現原理：Object.defineProperty() -資料劫持和釋出訂閱者模式（觀察者），下面講的就是資料劫持在程式碼中的具體實現。 1.先看如何呼

laravel框架學習（二）解決MySQL5.7以下資料無法遷移的方法

報錯提示不支援提供新的utf8字符集第一種方法：修改字符集修改字符集： 'charset' => 'utf8', 'collation' => 'utf8_unicode_ci', 第二種方法：如果不修改字符集修改下預設字串

TensorFlow學習（二）資料聚類分析

本文通過K均值演算法作為例子研究資料聚類分析一、無監督學習概念無監督學習可以從給定的資料集中找到感興趣的模式。無監督學習，一般不給出模式的相關資訊。所以，無監督學習演算法需要自動探索資訊是怎樣組成的，並識別資料中的不同結構。二、什麼是聚類聚類就是對大量未知

JavaWeb+Servlet：（二）Ajax非同步登入註冊？Servlet+Json 資料互動

上一篇文章已經將Dao層搭建好了，所以只需要編寫jsp及servlet。具體專案訪問GitHub：連結一、登入 1. 登入介面（index.jsp）需要匯入並載入 jquery.js檔案 <%@ page language="java" contentType="te

資料結構學習（二）

1樹與樹的表示 1. 1樹的一些基本術語結點的度(Degree): 節點的子樹個數樹的度：樹的所有結點中最大的度數葉結點(Leaf)：度為0的結點父結點(Parent)：有子樹的結點是其子樹的根結點的父結點子結點(Chile)：若A結點是B結點的父結

webpack學習（二）：配置載入css, 圖片, 字型, 資料(JSON, XML, CSV)等資原始檔

demo地址: https://github.com/Lkkkkkkg/webpack-demo webpack初步配置參照 https://blog.csdn.net/qq593249106/article/details/84892069 配置載入css檔案 webpack 視所

React學習（二）——元件的運用和資料傳遞

大家好，我是凱文，本篇文章主要圍繞React框架的元件以及元件之間資料的傳遞展開，並通過例項來實現特定的功能。下面先來簡單介紹一下React的元件，由本人學習實踐所得，用於做筆記，僅供參考。 React框架的一大特色就是它通過元件化的方式來構建和渲染前端頁面，瞭解

深度學習（二）——從零自己製作資料集到利用deepNN實現誇張人臉表情的實時監測（tensorflow實現）

一、背景介紹這篇文章主要參考我的上一篇文章：深度學習（一）——deepNN模型實現攝像頭實時識別人臉表情（C++和python3.6混合程式設計）。由於上一篇文章的模型所採用的資料集為fer2013，前面也介紹過這個基於這個資料集的模型識別人臉表情的準確率大概在70%左右

多執行緒學習（二）：執行緒間的資料共享

資料不共享的情況 public class MyThread04 extends Thread{ private int count=5; public MyThread04(String threadName) { this.setName(threadName); }

Datatables學習（二）ajax獲取資料

1、前提準備

實體類

mapper層

controller層

2、修改表格表頭結構

3、修改樣式為中文

4、新增ajax獲取資料

相關推薦