Django:bootstrap table自定义查询实现
参考:https://jalena.bcsytv.com/archives/tag/bootstrap
背景:
bootstrap table在客户端分页方式下,自带有简易的搜索功能,但是功能太单一,需要定制化组合搜索
前端:
注意前端的加大加粗的部分,就是为了自定义查询新增的
{% load staticfiles %} <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>项目列表</title><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script><script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script></head><body> {# 自定义搜索条件区域#}<div><input id="search-keyword" placeholder="请输入编号查询"><button id="search-button">查询</button></div>{# bootstrap table自动渲染区域#}<table id="mytab" class="table table-hover"></table></body><script type="text/javascript">$('#mytab').bootstrapTable({{#全部参数#}{#url: "{% static 'guchen_obj.json' %}", //请求后台的URL(*)或者外部json文件,json内容若为json数组[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}],#}//且键的名字必须与下方columns的field值一样,同时sidePagination需要设置为client或者直接注释掉,这样前台才能读取到数据,且分页正常。//当json文件内容为json对象时:{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]},//分页要写为server,但是server如果没有处理的话,会在第一页显示所有的数据,分页插件不会起作用 url:"/getdata", //从后台获取数据时,可以是json数组,也可以是json对象 dataType: "json",method: 'get', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: true, //是否启用排序 sortOrder: "asc", //排序方式 {#queryParams: oTableInit.queryParams,//传递参数(*)#} {#sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*),数据为json数组时写client,json对象时(有total和rows时)这里要为server方式,写client列表无数据#} pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 strictSearch: true,showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 {#height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度#} uniqueId: "ID", //每一行的唯一标识,一般为主键列 showToggle: false, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 //得到查询的参数 queryParams: function (params) {//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的var query_params = {rows: params.limit, //页面大小 page: (params.offset / params.limit) + 1, //页码 sort: params.sort, //排序列名 sortOrder: params.order, //排位命令(desc,asc)//查询框中的参数传递给后台 search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数 };return query_params;},columns: [{checkbox:true //第一列显示复选框 },{field: 'id', //返回数据rows数组中的每个字典的键名与此处的field值要保持一致 title: '构建序号'},{field: 'name',title: '用例总数'},{field: 'price',title: '通过率'},{field: 'operate',title: '操作',width: 120,align: 'center',valign: 'middle',formatter: actionFormatter,},],});//操作栏的格式化function actionFormatter(value, row, index) {var id = value;var result = "";result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";return result;}// 搜索查询按钮触发事件 $(function() {$("#search-button").click(function () {$('#mytab').bootstrapTable(('refresh')); // 很重要的一步,刷新url! $('#search-keyword').val()})})</script></html>
F12抓包:可以看到搜索的关键词“ABC”已经作为参数发送到服务端了,下来只要服务端接收该参数,并查询对应sql返回
后端:
def getdata(request):# 接收url传递来的search_kw参数值search_kw = request.GET.get('search_kw')print 'search_kw的值为:%s' % search_kwdb = pymysql.connect("192.168.207.160", "root", "123qwe!@#", "autotest", charset='utf8')cursor = db.cursor()rows = []# 根据是否存在搜索关键字执行不同sql,用来返回符合条件的数据if search_kw:saasCount = "select id,total,succ,fail,percent from saas where id like '%%%s%%'" % search_kwelse:saasCount = "select id,total,succ,fail,percent from saas"cursor.execute(saasCount)saas_results = cursor.fetchall()print list(saas_results)for i in list(saas_results):print i# 将数组中的每个元素提取出来拼接为rows的内容rows.append({"id": i[0], "name": i[1], "price": i[4]})print rows# rows返回为json数组return HttpResponse(json.dumps(rows))
页面:
首次进入菜单,由于search_kw为空,所以显示全部数据
当关键词为36时,模糊搜索
转载于:https://www.cnblogs.com/gcgc/p/11139530.html
Django:bootstrap table自定义查询实现相关推荐
- php bootstrap 分页 查询,深入了解Bootstrap table表格插件(二)前后端分页模糊查询...
这篇文章主要为大家分享了Bootstrap table学习笔记,前后端分页模糊查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下 ...
- Django模型自定义查询管理器
我们想要通过一个方法直接查询对应类型是否有数据,如果有返回前四条 Manager在django的模型当中是查询的一个元类,负责常用的查询方法. All 查询所有 Filter 条件查询 Get 单条语 ...
- django:bootstrap table加载django返回的数据
bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...
- bootstrap Table API和一些简单使用方法
官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows"."& ...
- BootStrap table 传递搜索参数
看bootStrap table文档不难发现它有一个queryparams属性,是向后台传递参数的,默认参数已有pageSize.pageIndex等,那么怎么传递自定义的参数呢?在网上找了好多也没有 ...
- python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)...
python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页) 一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 fro ...
- Bootstrap Table API 中文版(完整翻译文档)
/* * *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能 ...
- Bootstrap Table API 中文版(完整翻译文档)~!
/* * *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能 ...
- Bootstrap Table 中文API 详情
* *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能多资料 ...
最新文章
- 怎样格式化电脑_160G移动硬盘做PE启动盘 要怎样做
- JavaScript中delete运算符
- 计算机视觉与深度学习 | 目标检测综述(RCNN、RPN、YOLOv1 v2 v3、FPN、Mask RCNN、SSD代码类)
- SQL case when then else end运用
- 使用SQLyog创建表
- 如何实现在 Vue 中嵌入代码编辑器 ?
- 用Python制作自己的炫酷二维码
- 华为防火墙故障处理工具之查看路由表
- FT1248程序(FT232H,FT220X)
- 不到七千入手的高性能笔记本,游匣G15实测
- 与消费者情感同频共振,都市丽人荣获TMA移动营销大奖
- OSChina 周四乱弹 —— 但愿那个嘴上说着拒绝的人,其实心里最爱的是你。
- catia装服务器不显示不出来,CATIAV5无法显示略缩图怎么办?CATIAV5无法显示略缩图的原因分析和解决方案...
- 打印机中的废墨收集垫已到使用寿命怎么办
- casio科学计算机算mod余数,如何计算卡西欧fx-991ES计算中的Mod b
- Jacob的使用出错总结
- Bluemix云端数据库服务ClearDB MySQL使用示例———Python开发投票程序
- IcoFX 3.5.1多语言版本
- 实现北京114挂号平台自动挂号功能
- linux下载软件后报错,LINUX下安装软件包出错 何解