layui中table展示后端数据
1.下载layui的资源文件
layui官网，下载解压后就是下面图里的文件
把layui整个文件夹引入项目
2.在项目里引入下载好的文件
3.启动项目，在主页发送一个ajax请求
<script>
var xhr = new XMLHttpRequest();
xhr.open("get","findAll");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();
</script>
浏览器按F12查看请求
好，请求有发出去了，404先别管，主要是这个请求成功发出去了
4.接下来写后台的代码
数据库
DAO
(我这里用了MyBatis，如果用原生的JDBC则自己写流程)
@Repository
public interface BookDao {
@Select("select * from book")
List<Book> findAll();
}
Service
@Service
public class BookService {
@Autowired
private BookDao bookDao;
@Override
public List<Book> findAll() {
return bookDao.findAll();
}
}
去layui官网里把table的代码看看
1.首先要在页面引入layui的css及js
2.URL是数据的接口，并且layui只认json的数据格式，所以controller返回的数据就要是json格式
3.cols里的field是要跟数据库查出来的列对应，只要后端返回的数据符合layui.table的格式，layui就会自动展示
所以我最终的页面是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script>
var xhr = new XMLHttpRequest();
xhr.open("get","findAll");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();
</script>
</head>
<body>
<script src="layui/layui.js"></script>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,url: '/findAll'
,cols: [[ //表头
{field: 'id', title: 'ID', width:80,sort: true}
,{field: 'name', title: '书名', width:160}
,{field: 'price', title: '价格', width:80,sort: true}
]]
});
});
</script>
</body>
</html>
接下来编写controller层的代码
Controller
@Controller
@RequestMapping()
public class BookController {
@Autowired
private BookService bookService;
@RequestMapping(value="findAll",produces="text/html;charset=utf-8")
public @ResponseBody String findAll(){
List<Book> bookList = bookService.findAll();
String jsonString = JSON.toJSONString(bookList);
//下面这里这个格式是在网上找的
String books="{\"code\":\"0\",\"msg\":\"ok\",\"count\":100,\"data\":"+jsonString+"}";
System.out.println("-----"+books);
return books;
}
}
这样我们就把json格式的数据返回去前端了
启动项目，浏览器进入主页
成功展示了。
1420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
