layui数据表格的使用

layui是国人开发的一款简单的前端框架,今天给大家带来基础使用
html代码

	 	<table class="layui-hide" id="demo" lay-filter="test"></table>
		<!--需要提供的table表 -->
		<!-- 工具栏 -->
		<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" id='up1'>上传文件</a>
   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="select">查看图片</a>
</script>

js代码

layui .use('table',function() {//应用layui
					var table= layui.table;//引用数据表格
						table.render({
								elem : '#demo',
								height : 420,
								url : '../BookAction.action?methodName=listBook&book_state=' + st // 数据接口
								,
								title : '用户表',
								page : true // 开启分页
								,
								toolbar : 'default' // 开启工具栏，此处显示默认图标，可以自定义模板，详见文档
								,
								totalRow : true // 开启合计行
								,
								cols : [ [ // 表头
								{
									type : 'checkbox',//多选框
									fixed : 'left'
								}, {
									field : 'book_id',//从后台传过来的数据项
									title : '编号',
									width : 90,
									sort : true,
									fixed : 'left'
								}, {
									field : 'book_name',
									title : '书名',
									width : 110
								}, {
									field : 'book_category_name',
									title : '类型',
									width : 90,
									sort : true,
									totalRow : true
								}, {
									field : 'book_author',
									title : '作者',
									width : 90,
									sort : true
								}, {
									field : 'book_price',
									title : '价格',
									width : 90,
									sort : true,
									totalRow : true
								}, {
									field : 'publishing',
									title : '出版社',
									width : 100
								}, {
									field : 'book_desc',
									title : '简介',
									width : 160
								}, {
									field : 'book_image',
									title : '图片',
									width : 135,
									sort : false,
									totalRow : true
								}, {//获取桌面的工具栏
									fixed : 'right',
									width : 165,
									align : 'center',
									toolbar : '#barDemo'
								} ] ]
							});

java代码
public class BookAction extends ActionSupport {
private IBookBiz ibBiz = new BookBizImpl(); //后台的数据
private PageBean pb = new PageBean();//分页
private Out o = new Out();//回调页面

	public String listBook(HttpServletRequest request, HttpServletResponse response) {
		pb.setPageBean(request);//初始化PageBean 
		Book book = new Book();//
		List<Book> listBook = null;//定义list集合
		try {
			listBook = ibBiz.ListBook(book, pb);//拿到后台的数据
		} catch (Exception e1) {
			// TODO Auto-generated catch block
			e1.printStackTrace();
		}

		Map<String, Object> map = new HashMap<>();//传入前台所需要的数据格式也是这样
		map.put("data", listBook);
		map.put("code", 0);
		map.put("count", 1);
		map.put("msg", "");
		String out = JSON.toJSONString(map);//回调会界面
		try {
			o.ptint(response, out);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}
	}
html那里还需要导入layui包可以去官网下载