layui的分页+模糊查询

Question

layui.use('upload', function(){
var upload = layui.upload;
var $ = layui.jquery

layui.use('table', function(){
var table = layui.table,//表格
laypage = layui.laypage,//分页
layer = layui.layer; //弹层

  //执行一个 table 实例

  table.render({
    elem: '#kwgroup_table',
    height: 620,
    url: '/spRestCon/findShangPin', //数据接口
    title: '商品表',
    page: true, //开启分页
    toolbar: 'default', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    //totalRow: true, //开启合计行
    cols: [[ //表头
        //fixed: 'left', 
      {field: 'id', title: '商品ID',sort: true,  width:50},
      {field: 'productName', title: '商品名称', width:100},
      {field: 'money', title: '商品价格', width: 80},
      {field: 'createdate', title: '添加时间', width:110},
      {fixed: 'right',title:'商品信息操作', width: 135, align:'center', toolbar: '#operation'}
    ]]
  });

  //分页
  laypage.render({
    elem : 'paging', // 分页容器的id
    skin : '#1E9FFF', // 自定义选中色值
    jump : function(obj, first) {
        if (!first) {
            layer.msg('第' + obj.curr + '页', {
                offset : 'b'
            });
        }
     }
  });  

  //监听行工具事件
  table.on('tool(kwgroup_table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'del'){
            var delId=data.id;
      layer.confirm('是否删除此商品', function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //向服务端发送删除指令
        $.get("","id="+delId,function(rv){
            if(rv.falg==false){
                layer.msg('删除失败');
            }else{
                layer.msg('已删除');
            }
        });
      });
    } else if(layEvent === 'edit'){
        layer.confirm('选择操作', {
              btn: ['添加', '修改', '取消'] //可以无限个按钮
              ,btn1: function(index, layero){
                  layer.msg('按钮1');
              },btn2: function(index, layero){
                  layer.msg('按钮2');
            }
        });

    }else if(layEvent === 'upd'){
          layer.msg('编辑操作');

        }
  });
});

$('#btn').click(function(){
var spName=$("#spName").val().trim();
var page=$(".layui-laypage-limits").find("option:selected").val();//获取分页数目
var limit=$(".layui-laypage-em").next().html();//获取当前页码值
alert(page);
alert(limit);
if(spName==null){
alert(spName);
}else{
$.get("/spRestCon/findShangPin",
"productName="+spName+
"&page="+page+
"&limit="+limit,
function(rv){

      },"json");
  }

});
});

我把文本框写入的值传到后台拿到返回值之后怎么展示模糊查询的数据？
是把上面那一片layui的模板代码把他们放在一个方法体里在拿到返回值的ajax方法体里调用还是怎么弄？
SOS~

Answer 1

你可以参考一下我以前写的这个，应该原理差不多

                    <ul id="form_data">

                    </ul>
        //分页
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage, layer = layui.layer;
        //总页数大于页码总数
        laypage.render({
            elem: 'page',
            limit: {$number},
            count: {$data[0][num]}, //数据总数
            curr:$(".layui-laypage-em").next("em"),
            jump: function (obj, first) {
                if (!first) {
                    ajax(obj.curr,{$number},{$data[0][num]});
                }
            }
        });
    }) 

    function ajax(page,limit,num){
        $.ajax({
            type: "GET",
            url: "index.php?m=ajax_data",
             data: {page:page, limit:limit,count:num,type:2},
            dataType: "json",
            success:function(res){
                var li="";
                for(var i=0;i<res.list.length;i++){
                    li+="<li><span>"+res.list[i]['name']+"</span><span>"+res.list[i]['estate']+"</span><span>"+res.list[i]['area']+"m<sup>2</sup></span><span>"+res.list[i]['tel']+"</span><span><a href='javascript:;' onclick='online(this)'>查看详情</a></span></li>";
                };
                $("#form_data").html(li);
            }
        })        
    }