其他回答(1)
可以到社区提问&http://fly.layui.com/
文档参考&http://www.layui.com/doc/modules/table.html
园豆：7905
清除回答草稿
&&&您需要以后才能回答，未注册用户请先。layui 利用ajax冲获取到json 数据后 怎样进行渲染_百度知道
layui 利用ajax冲获取到json 数据后 怎样进行渲染
我有更好的答案
action?'+comment['number']对应&names',
cache::&V006&。?12345678910111213141516
url:&#39: function(data){
$.each(data, function(commentI
alert(&]对应&names&quot:&
dataT}],可见comment[&#39,学号&number&quot.jsonUtil(list);
姓名&/调用接口实现类
+ comment['names']);V006&apply&#47, comment){
alert(&quot，返回的list其实是一个对象Student，包括了names和nunmber字段?1234567
public String mystudent() throws Exception{
List list=priceService.query();&#47: &json&;,&names&:&LiLei& 2、Ajax的URL指向在java的action中mystudent方法;number']);:&LiLei&quot: &post&;，comment[&#391、首先前台用Ajax，其中注意dataType一定要选择json方式，Action成功返回给页面的Json内容是这样的[{&number&;
保健养生行家
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。json 读取数据创建表格-freejs.net代码演示
&&&&json 读取数据创建表格()
json 读取数据创建表格
&id=&mssg&&&
&id=&dataTable&&align=&center&&&
&script&type=&text/javascript&&&&
&&&&$(&#dataTable&).jsonTable({&&
&&&&&&&&head&:&['#','Operating&System','Market&Share'],&&
&&&&&&&&json&:&['id',&'name',&'share']&&
&&&&$(&#dataTable&).jsonTableUpdate({&&
&&&&&&&&source&:&&data.json&,&&
&&&&&&&&rowClass&:&&rowClass&,&&
&&&&&&&&callback&:&function(){&&
&&&&&&&&&&&&$(&#mssg&).html(&Table&updated&at&&&+&new&Date());&&
&&&&&&&&}&&
&/script&&&
&原文地址:接着&&继续完善我们的demo,这次我们加一个搜索按钮
在table标签的上方，加入这样一组html
&div class="demoTable"&
搜索商户：
&div class="layui-inline"&
&input class="layui-input" name="keyword" id="demoReload" autocomplete="off"&
&button class="layui-btn" data-type="reload"&搜索&/button&
在js加入初始化代码和定义加载方法
layui.use('table', function(){
var table = layui.
//方法级渲染
table.render({
elem: '#LAY_table_user'
,url: 'UVServlet'
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
,{field:'aid', title: '商户', width:80, sort: true}
,{field:'uv', title: '访问量', width:80, sort: true,edit:true}
,{field:'date', title: '日期', width:180}
,{field:'datatype', title: '日期类型', width:100}
,id: 'testReload'
,page: true
,height: 600
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
table.reload('testReload', {
keyword: demoReload.val()
绑定click点击事件
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
此时点击查询按钮，会将keyword这个关键字传到后端，接下来就是自己处理查询关键字业务了。
到目前为止，搜索也有了，分页也有了,对了，分页会自动传到后端page,limit2个值到后台，相当于（pageindex,pagesize）
预览下效果
看看请求的参数
&从参数可以看出，数据表格默认是get请求
给表格增加操作按钮
首先加入一组html,放到table标签下面，代码如下
&table class="layui-hide" id="LAY_table_user" lay-filter="useruv"&&/table&
&script type="text/html" id="barDemo"&
&a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail"&查看&/a&
&a class="layui-btn layui-btn-mini" lay-event="edit"&编辑&/a&
&a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del"&删除&/a&
然后在js中指定工具条
//方法级渲染
table.render({
elem: '#LAY_table_user'
,url: 'UVServlet'
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
,{field:'aid', title: '商户', width:80, sort: true}
,{field:'uv', title: '访问量', width:80, sort: true,edit:true}
,{field:'date', title: '日期', width:180}
,{field:'datatype', title: '日期类型', width:100}
,{field:'right', title: '操作', width:177,toolbar:"#barDemo"}
,id: 'testReload'
,page: true
,height: 600
界面效果如下
&接下来需要给按钮绑定事件，来完成功能操作
在LayUI里面，一般采用table.on()来表示事件，例如这个
//监听表格复选框选择
table.on('checkbox(useruv)', function(obj){
console.log(obj)
我勾选一个复选框，就打印一个日志
加入以下js代码，来绑定工具条事件
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
} else if(obj.event === 'edit'){
layer.alert('编辑行：&br&'+ JSON.stringify(data))
这时候，点击按钮就会有反应了。这里说明一下
接下来就是把数据传递到后端，直接将js改造如下
//监听工具条
table.on('tool(useruv)', function(obj){
var data = obj.
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
console.log(data);
url: "UVServlet",
type: "POST",
data:{"uvid":data.id,"memthodname":"deleteuv","aid":data.aid},
dataType: "json",
success: function(data){
if(data.state==1){
//删除这一行
obj.del();
//关闭弹框
layer.close(index);
layer.msg("删除成功", {icon: 6});
layer.msg("删除失败", {icon: 5});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,title: '修改 ID 为 ['+ data.id +'] 的访问量'
,value: data.uv
}, function(value, index){
//这里一般是发送修改的Ajax请求
EidtUv(data,value,index,obj);
编辑的方法
EidtUv(data,value,index,obj) {
url: "UVServlet",
type: "POST",
data:{"uvid":data.id,"memthodname":"edituv","aid":data.aid,"uv":value},
dataType: "json",
success: function(data){
if(data.state==1){
//关闭弹框
layer.close(index);
//同步更新表格和缓存对应的值
obj.update({
layer.msg("修改成功", {icon: 6});
layer.msg("修改失败", {icon: 5});
至此，数据表格的绑定、展示、分页、搜索、查看、编辑、删除、排序 功能都已经完成，是不是很简单？
此处粘贴出完整的页面代码
&!DOCTYPE html&
&meta charset="utf-8"&
&title&layui&/title&
&meta name="renderer" content="webkit"&
&meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&
&link rel="stylesheet" href="../Assets/css/layui.css"&
&!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --&
&div style="margin-bottom: 5"&
&!-- 示例-970 --&
&ins class="adsbygoogle" style="display:inline-width:700height:700px" data-ad-client="ca-pub-8862" data-ad-slot=""&&/ins&
&div class="demoTable"&
搜索商户：
&div class="layui-inline"&
&input class="layui-input" name="keyword" id="demoReload" autocomplete="off"&
&button class="layui-btn" data-type="reload"&搜索&/button&
&table class="layui-hide" id="LAY_table_user" lay-filter="useruv"&&/table&
&script type="text/html" id="barDemo"&
&a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail"&查看&/a&
&a class="layui-btn layui-btn-mini" lay-event="edit"&编辑&/a&
&a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del"&删除&/a&
&script src="../Assets/layui.js"&&/script&
layui.use('table', function(){
var table = layui.
//方法级渲染
table.render({
elem: '#LAY_table_user'
,url: 'UVServlet'
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:<span style="background-color: #f5f5f5; color: #, sort: true, fixed: true}
,{field:'aid', title: '商户', width:<span style="background-color: #f5f5f5; color: #, sort: true}
,{field:'uv', title: '访问量', width:<span style="background-color: #f5f5f5; color: #, sort: true,edit:true}
,{field:'date', title: '日期', width:<span style="background-color: #f5f5f5; color: #0}
,{field:'datatype', title: '日期类型', width:<span style="background-color: #f5f5f5; color: #0}
,{field:'right', title: '操作', width:<span style="background-color: #f5f5f5; color: #7,toolbar:"#barDemo"}
,id: 'testReload'
,page: true
,height: <span style="background-color: #f5f5f5; color: #0
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
table.reload('testReload', {
keyword: demoReload.val()
//监听表格复选框选择
table.on('checkbox(useruv)', function(obj){
console.log(obj)
//监听工具条
table.on('tool(useruv)', function(obj){
var data = obj.
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
console.log(data);
url: "UVServlet",
type: "POST",
data:{"uvid":data.id,"memthodname":"deleteuv","aid":data.aid},
dataType: "json",
success: function(data){
if(data.state==<span style="background-color: #f5f5f5; color: #){
obj.del();
layer.close(index);
layer.msg("删除成功", {icon: <span style="background-color: #f5f5f5; color: #});
layer.msg("删除失败", {icon: <span style="background-color: #f5f5f5; color: #});
} else if(obj.event === 'edit'){
layer.prompt({
formType: <span style="background-color: #f5f5f5; color: #
,title: '修改 ID 为 ['+ data.id +'] 的访问量'
,value: data.uv
}, function(value, index){
EidtUv(data,value,index,obj);
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
EidtUv(data,value,index,obj) {
url: "UVServlet",
type: "POST",
data:{"uvid":data.id,"memthodname":"edituv","aid":data.aid,"uv":value},
dataType: "json",
success: function(data){
if(data.state==<span style="background-color: #f5f5f5; color: #){
layer.close(index);
//同步更新表格和缓存对应的值
obj.update({
layer.msg("修改成功", {icon: <span style="background-color: #f5f5f5; color: #});
layer.msg("修改失败", {icon: <span style="background-color: #f5f5f5; color: #});
&应大家要求，将servlet代码贴出来,其中用到了json.jar
import com.weimob.models.P
import com.weimob.models.QueryR
import com.weimob.models.UvD
import com.weimob.uv.dao.WeiMobUvD
import org.json.JSONA
import org.json.JSONO
import javax.servlet.RequestD
import javax.servlet.ServletE
import javax.servlet.annotation.WebS
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import java.io.IOE
import java.util.ArrayL
import java.util.L
import java.util.M
@WebServlet(name="UVServlet",
urlPatterns={"/WebApp/UVServlet"},
loadOnStartup=0)
public class UVServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String memthodname = request.getParameter("memthodname");
if(memthodname!=null){
switch (memthodname){
case "queryList":
case "deleteuv":
deleteUv(request,response);
case "edituv":
edituv(request,response);
queryList(request, response);
queryList(request, response);
private void queryList(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
String str = request.getParameter("keyword");
String pindex = request.getParameter("page");
String limit = request.getParameter("limit");
response.setStatus(200);
int aid = 0;
int pagesize=15;
int index = 0;
int total = 0;
if (str != null && str.length() & 0) {
aid = Integer.valueOf(str);
if (pindex != null) {
index = Integer.parseInt(pindex);
pagesize=Integer.parseInt(limit);
WeiMobUvDao dao = new WeiMobUvDao();
StringBuffer sbtotal = new StringBuffer();
sbtotal.append("SELECT count(1) as count FROM WpMulShopDataUv_1 ");
if (aid & 0) {
sbtotal.append(" where aid=");
sbtotal.append(aid);
total = dao.GetCount(sbtotal.toString());
if (total & 0) {
StringBuffer sb = new StringBuffer();
sb.append("SELECT Id,AId,Uv,DataType,Date FROM WpMulShopDataUv_1 ");
if (aid & 0) {
sb.append(" where aid=");
sb.append(aid);
if (total & pagesize) {
sb.append(" Limit ");
int start = (index - 1) *
if (start & 0) {
start = 0;
sb.append(start);
sb.append(",");
sb.append(pagesize);
List&UvData& list = dao.QueryUv(sb.toString());
QueryResult&UvData& result = new QueryResult&UvData&(total, list);
String jsonstr= ConvertListToPageJson(list,total);
System.out.println(jsonstr);
request.setAttribute("result", jsonstr);
response.getWriter().print(jsonstr);
QueryResult&UvData& result = new QueryResult&UvData&(total, null);
JSONObject obj = new JSONObject(result);
response.getWriter().print(obj);
private void deleteUv(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
String str = request.getParameter("aid");
String uvid = request.getParameter("uvid");
String limit = request.getParameter("limit");
response.setStatus(200);
int aid = 0;
int uv_id=0;
int index = 0;
int total = 0;
if (str != null && str.length() & 0) {
aid = Integer.valueOf(str);
if (uvid != null) {
uv_id = Integer.parseInt(uvid);
if(uv_id&=0){
response.getWriter().print("参数无效");
WeiMobUvDao dao = new WeiMobUvDao();
List list=new ArrayList&Integer&();
list.add(uv_id);
int res_count= dao.DeleteByIds(aid,list);
JSONObject jsonObject = new JSONObject();
jsonObject.put("state",res_count&0?true:false);
jsonObject.put("code",0);
jsonObject.put("msg","null");
response.getWriter().print(jsonObject);
private void edituv(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
String str = request.getParameter("aid");
String uvid = request.getParameter("uvid");
String uvstr = request.getParameter("uv");
response.setStatus(200);
JSONObject jsonObject = new JSONObject();
int aid = 0;
int uv_id=0;
int uv = 0;
if (str != null && str.length() & 0) {
aid = Integer.valueOf(str);
if (uvid != null) {
uv_id = Integer.parseInt(uvid);
uv= Integer.parseInt(uvstr);
if(uv_id&=0){
response.setStatus(500);
jsonObject.put("state",-1);
jsonObject.put("msg","参数无效");
response.getWriter().print(jsonObject);
response.setStatus(500);
jsonObject.put("state",-1);
jsonObject.put("msg","参数无效");
response.getWriter().print(jsonObject);
WeiMobUvDao dao = new WeiMobUvDao();
List list=new ArrayList&Integer&();
list.add(uv_id);
UvData res= dao.getByIds(aid,uv_id);
if(res==null){
response.setStatus(500);
jsonObject.put("state",-1);
jsonObject.put("msg","参数无效,对象不存在");
response.getWriter().print(jsonObject);
int res_count= dao.modifyEntity(res);
jsonObject.put("state",res_count&0?true:false);
jsonObject.put("code",0);
jsonObject.put("msg","null");
response.getWriter().print(jsonObject);
String ConvertListToPageJson(List&?& list, int countList) {
// 新建一个json数组
JSONArray jsonArray = new JSONArray();
// 新建一个json对象
JSONObject jsonObject = null;
// 遍历泛型集合
for (Object object : list) {
jsonObject = new JSONObject(object);
jsonArray.put(jsonObject);
// 转换数据格式
String json = jsonArray.toString();
// 拼接字符串
StringBuffer sb = new StringBuffer();
sb.append("{\"count\":");
sb.append(countList);
sb.append(",\"code\":");
sb.append(0);
sb.append(",\"msg\":");
sb.append("null");
sb.append(",\"data\":");
sb.append(json);
sb.append("}");
String jsonString = sb.toString();
return jsonS
LayUI为我们提供了强大丰富的类库组件，完善的文档，学习成本和开发成本相对低廉，具有快速，扁平化等优点。
关于数据表格的介绍就到这里。
阅读(...) 评论()