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' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"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_kw
db = 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_kw
else:
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时，模糊搜索
Django:bootstrap table自定义查询实现的更多相关文章
- bootstrap table 自定义checkbox样式
//css <style> .checkbox-custom { position: relative; padding: 0 15px 0 25px; margin-bottom: 7p ...
- 如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中
页面: <div> <form id="exp_form"> 查询参数... <button type="button" oncl ...
- 自定义 Azure Table storage 查询过滤条件
本文是在Azure Table storage 基本用法一文的基础上,介绍如何自定义 Azure Table storage 的查询过滤条件.如果您还不太清楚 Azure Table storage ...
- Azure 基础：自定义 Table storage 查询条件
本文是在 <Azure 基础:Table storage> 一文的基础上介绍如何自定义 Azure Table storage 的查询过滤条件.如果您还不太清楚 Azure Table s ...
- bootstrap table分页，重新数据查询时页码为当前页问题
问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...
- bootstrap Table动态绑定数据并自定义字段显示值
第一步:我们在官网下载了bootstrap 的文档,并在项目中引入bootstrap table相关js文件,当然,也要记得引入jquery文件 大概如图: 第二步:定义一个table控件 第三步:j ...
- django：bootstrap table加载django返回的数据
bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...
- 轻量级表格插件Bootstrap Table。拥有强大的支持固定表头、单/复选、排序、分页、搜索及自定义表头等功能。
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
- 161222、Bootstrap table 服务器端分页示例
bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端boot ...
随机推荐
- php.exe文件
一.正常情况PHP文件的访问需要通过浏览器,访问Apache,才能运行一个php文件 php文件在Apache文件夹的站点根目录里 浏览器通过域名文件的形式访问 二.通过浏览器在不需要Apache服务 ...
- C程序的函数说明使用和特点说明第一节
一.函数的特点: 全部都是全部函数构成 面向过程的:是函数式语言 函数的调用 是按需调用 封装包含 二.程序中函数的作用: 可以使用函数使程序变的简短 和 清晰 提高代码重用性 提高开发效率 有利于程 ...
- 洛谷 P1257 平面上的最接近点对 题解
P1257 平面上的最接近点对 题目描述 给定平面上n个点,找出其中的一对点的距离,使得在这n个点的所有点对中,该距离为所有点对中最小的. 输入格式 第一行:n:2≤n≤10000 接下来n行:每行两 ...
- 《挑战30天C++入门极限》C++类的继承与多重继承的访问控制
C++类的继承与多重继承的访问控制 在前面的练习中我们一直在使用public的继承方式,即共有继承方式,对于protected和private继承方式,即保护继承与私有继承方式我们并没有讨论. ...
- linux 常用性能优化
linux 常用性能优化 1. 优化内核相关参数 配置文件/etc/sysctl.conf 配置方法直接将参数添加进文件每条一行. sysctl -a可以查看默认配置 sysctl -p 执行并检测是 ...
- Oracle自动备份（多个库），压缩打包，删除原文件
1.创建一个database_Backup.bat文件,用记事本打开 内容参考如下:(楼主这里自动备份了四个数据库) set "now=%date:~0,4%%date:~5,2%%date ...
- A2T和T2A，===string和CString互转 方法一：--用宏的方式
USES_CONVERSION它是在堆栈上分配空间的,也就是说你在你在函数未结束就不会被释放掉.所有要注意不要在一个函数中用while循环执行它,不然栈空间就马上会分配完(栈空间一般只有2M,很小). ...
- 搭建K8S集群
一.前言 我们将现有的虚拟机称之为Node1,用作主节点.为了减少工作量,在Node1安装Kubernetes后,我们利用VirtualBox的虚拟机复制功能,复制出两个完全一样的虚拟机作为工作节点. ...
- Git的使用(1) —— 版本库
1. 简介 Git作为一个分布式版本控制系统,其优点是不需要一直连接远端版本库就可以使用. 故其为实现分布版本控制专门设计了一整套的存储区间和语句,用来实现. (1) 本地版本库:建立在本机磁盘上的文 ...
- 自定义alert弹框，title不显示域名(重写alert)
问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...