dataTables使用入门

mac2025-06-14  17

1、目录结构

2、controller层获取数据

package com.asiainfo.group.controller; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class DateTableController { @RequestMapping("/getData") public Map<String, List<Map<String, String>>> getData(){ Map<String, List<Map<String, String>>> obj = new HashMap<String,List<Map<String,String>>>(); List<Map<String, String>> datas = new ArrayList<Map<String,String>>(); for (int i = 1; i < 11; i++) { Map<String, String> data = new HashMap<String,String>(); data.put("id", i+""); data.put("name", i+"张三"); data.put("age", "20"); data.put("sex", "女"); datas.add(data); } obj.put("mydata", datas); return obj; } }

3、demo页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="DataTables-1.10.15/media/css/jquery.dataTables.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script> <script type="text/javascript"> $(function(){ $('#table_id_example').DataTable({ ajax: { url: '/getData', dataSrc: 'mydata' }, columns: [ { data: 'id' }, { data: 'name' }, { data: 'age' }, { data: 'sex' } ] }); }); </script> </head> <body> <table id="table_id_example" class="display"> </table> </body> </html>

 

最新回复(0)