bootstrap table实现从后台搜索

刚开始尝试了好几种方法,都不顶用,最后还是想从官网提供的方法入手bootstrap table有一个“refresh”方法,将此方法绑定到搜索按钮实现从server端的搜索。

首先来看看官网的refresh方法提供的参数【刷新远程数据, {silent: true} 刷新客户端数据,{url: newUrl}根据newUrl刷新数据,还支持设置参数哦{query: {foo:  'bar'}}】

这里主要是用到最后一个参数。

其它的多余脚本可以看我的《bootstrap table学习小记》一文,下面主要按钮的前台的脚本

前台脚本:

<span style="font-family:Times New Roman;"><span style="font-size:14px;"><div class="form-group">
      <label class="col-md-4 control-label" for="searchtext"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>用户名</label>
      <div class="col-md-8">
         <input type="text" name="search" class="form-control" id="searchtext" placeholder="请输入用户名"/>
      </div>
   </div></span></span>

<span style="font-family: 'Times New Roman';"><span style="font-size:14px;">$("#search").bind("click",function(){
	    searchtext=$("#searchtext").val();
		if (searchtext==''){
		    alert("请输入需要搜索的用户名");
		    return
		}
		$(".search input").val(searchtext);
		$("#table").bootstrapTable('refresh',{query: {text:searchtext}});
	});</span></span>
后台的函数:

<pre name="code" class="python">def userssource1(request):
    userlist=[]
    searchtext = request.POST.get('text','')
    username = request.session.get('uname','null')
    limit = request.POST.get('limit','')
    offset = request.POST.get('offset','')
    offset = int(offset)
    limit = int(limit)
    unitid=request.POST.get('unit','')
    userid= Users.objects.filter(name=username)[0].userid
    if not searchtext:#刚开始搜素框里并没有值,所以此时从数据库中取出所有的数据
        userlefts = Users.objects.filter(unit=unitid)[offset:offset+limit]
        #userlefts = Users.objects.filter(unit=unitid)
        length=Users.objects.filter(unit=unitid).count()
    if len(searchtext)>0:#当搜素框里有值时,只从数据库中取出要搜素的用户
        user1=Users.objects.filter(name__startswith=searchtext,unit=unitid)
        userlefts = user1[offset:offset+limit]
        length=len(user1)
    for usr in userlefts:
        user_id=usr.id
        if len(UserUnitPrivs.objects.filter(useridx=user_id)):
            if len(UserUnitPrivs.objects.filter(useridx=user_id)[0].unitidx)==2:
                user_unitidx=UserUnitPrivs.objects.filter(useridx=user_id)[0].unitidx
                unitname1=Unit.objects.filter(unitidx2=user_unitidx)[0].name1
                unitname2=Unit.objects.filter(unitidx2=user_unitidx)[0].name2
                admin=get_user_privs(usr.userid)
                c ={'id':usr.id,'name':usr.name,'unit':usr.unit,'usrid':str(usr.userid),'admin':admin,'unitname1':unitname1,'unitname2':unitname2,'realname':usr.real_name,'gender':usr.gender,'phone':usr.tel_num,'email':usr.email,'address':usr.address}             
                userlist.append(c)
    data='{"total":%s,"rows":%s}' % (length,simplejson.dumps(userlist,ensure_ascii=False))
    #如果是服务端分页,返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。
    return HttpResponse(data,mimetype='text/javascript;')
 
 

下面这幅图是不设置搜索值的结果

下面这幅图是搜索框中传了“哈哈”搜索值的结果图

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想在bootstrapTable中使用json数据,你需要确保json数据满足以下要求: 1. 数据格式为json数组,每个元素代表一行数据。 2. 每个元素是一个json对象,对象的属性名对应表格的列名,属性值对应表格的单元格内容。 下面是一个示例json数据: ```json [ { "id": 1, "name": "John", "age": 30, "gender": "male" }, { "id": 2, "name": "Jane", "age": 25, "gender": "female" }, { "id": 3, "name": "Bob", "age": 40, "gender": "male" } ] ``` 在后台,你可以将数据查询出来,然后转换成json格式,最后返回给前端。如果你使用Java语言,可以使用Gson库将对象转换成json字符串,例如: ```java List<User> userList = userService.getUserList(); Gson gson = new Gson(); String json = gson.toJson(userList); return json; ``` 这里假设User是一个JavaBean类,包含了用户的id、姓名、年龄和性别等属性。getUserList()方法返回一个包含了多个User对象的集合。toJson()方法将集合转换成json字符串。最后在Controller中将json字符串返回给前端即可。 在前端,你需要在bootstrapTable的配置中指定数据来源,例如: ```javascript $('#table').bootstrapTable({ url: '/user/list', // 后台返回json数据的url method: 'get', pagination: true, sidePagination: 'client', columns: [ { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, { field: 'gender', title: '性别' } ] }); ``` 这里的url指定了后台返回json数据的url,method指定了请求方法(get或post),pagination指定了是否启用分页功能,sidePagination指定了分页方式(client或server),columns指定了表格的列名和对应的json属性名。 当bootstrapTable加载完成后,会向后台发送一个get请求,后台返回json数据。bootstrapTable根据配置将json数据解析成表格展示出来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值