14:28 提问
DataTables+BootStrap创建复杂表头，head的内容总是不能垂直居中。
网站使用了DataTables，他本身提供了一个dataTables.bootstrap.css这么一个样式表，我创建一个复杂表头的时候应用了这个样式表，可是head的内容总是不能垂直居中，请问怎么解决？
按时间排序
没有人用过吗？求大神们指导一下
/* dataTables列内容居中 */
.table&tbody&tr&td{
text-align:
/* dataTables表头居中 */
.table&thead:first-child&tr:first-child&th{
text-align:
请教下您，如何动态创建复杂的表头？
其他相似问题前言：BootstrapTable基于Bootstrap，Bootstrap基于jquery，所以需要引入jquery后再引入bootstrap。
&link href="${ctx}/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"&&link rel="stylesheet" href="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table.min.css"&&script src="${ctx}/assets/plugins/jquery/jquery-2.1.4.min.js"&&/script&&script src="${ctx}/assets/plugins/bootstrap/js/bootstrap.min.js"&&/script&&script src="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table.min.js"&&/script&&script src="${ctx}/assets/plugins/bootstrap-datatable/bootstrap-table-zh-CN.min.js"&&/script&&link rel="stylesheet" href="${ctx}/assets/font/font-awesome/4.5.0/css/font-awesome.min.css"&
通过 JavaScript 的方式
通过表格 id 来启用 bootstrap table。
文档链接戳。
& &div class="box-body"&& & &&div id="toorbar" class="btn-group"&& & & &&shiro:hasPermission name="admin:ordervip:create"&& & & &&button id="addBtn" type="button" class="btn btn-default"&& & & & &&i class="glyphicon glyphicon-plus"&&/i&新增订单& & & &&/button&& & & &&/shiro:hasPermission&& & &&/div&& & &&table id="table"&&/table&& &/div&
function initTable() {
& & $("#table").bootstrapTable({& & & & &url: "${aapi}/orderVip/list", & //服务器数据加载地址，与末尾sidePagination参数设置为server对应。& & & & &columns: [{ & & & & & & //列配置项,橙名为列参数，本文介绍有限，具体有哪些可以详细看文档介绍。& & & & & & & field: 'orderNo',& & & & & & & title: '订单编号',& & & & & & & formatter: function(value, row, index) { &// value:field的值,row:行数据，用row.createdDtm找发起时间字段,index:行下标& & & & & & & & &return [& & & & & & & & & & & &'&shiro:hasPermission name="admin:ordervip:detail"&
& & & & & & & & & & & &&a class="detail ml10" href="javascript:void(0)" title="订单详情"&',& & & & & & & & & & & &value, '&/a&&/shiro:hasPermission&',& & & & & & & & & & & &'&shiro:lacksPermission name="admin:ordervip:detail"&', value,& & & & & & & & & & & &'&/shiro:lacksPermission&'& & & & & & & & & & & &].join('');& & & & & & & & & &},& & & & & & & events: {& & & & & & & & & & & &'click .detail': function(e, value, row, index) { && & & & & & & & & & & & & & &$.FORM.showFormDialog({ & &//bootstrap-dialog与结合使用，下面的文章中详细阐述。
& & & & & & & & & & & & & & & &title: "订单详情",& & & & & & & & & & & & & & & &isReadOnly: true,& & & & & & & & & & & & & & & &dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,& & & & & & & & & & & & & & & &templateUrl: '${aapi}/page/custom/vipOrderDetail'& & & & & & & & & & & & & & &});& & & & & & & & & & & & }& & & & & & & & & & & }& & & & & & & }, {& & & & & & & field: 'createdDtm',& & & & & & & title: '发起时间'& & & & & & & }, {& & & & & & & field: 'cusName',& & & & & & & title: '发起人'& & & & & & & }, {& & & & & & & field: 'splitDtm',& & & & & & & title: '拆单时间'& & & & & & & }, {& & & & & & & field: 'splitnum',& & & & & & & title: '拆单数量'& & & & & & & }, {& & & & & & & field: 'type',& & & & & & & title: '类型',& & & & & & & formatter: function(value, row, index) {& & & & & & & & & & & & & & if(value == '0') {& & & & & & & & & & & & & & return "维修";& & & & & & & & & & & & & & }& & & & & & & & & & & & & & if(value == '1') {& & & & & & & & & & & & & & & &return "搬运";& & & & & & & & & & & & & & }& & & & & & & & & & & & & & if(value == "1,0") {& & & & & & & & & & & & & & & &return "搬运，维修"& & & & & & & & & & & & & & }& & & & & & & & & & & & &}& & & & & & & }, {& & & & & & & field: 'state',& & & & & & & title: '订单状态',& & & & & & & formatter: function(value, row, index) {& & & & & & & & & & & & & & if(typeof(value) == 'undefined' || value == "0") {& & & & & & & & & & & & & & & &return "未拆分";& & & & & & & & & & & & & & }& & & & & & & & & & & & & & if(value == '1') {& & & & & & & & & & & & & & & &return "已拆分";& & & & & & & & & & & & & & }
& & & & & & & & & & & & &}& & & & & & & }, {& & & & & & & field: 'remark',& & & & & & & title: '备注'& & & & & & & }, {& & & & & & & field: 'file',& & & & & & & title: '文件',& & & & & & & formatter: function(value, row, index) {& & & & & & & & & & & & & & if(row.orderFile == undefined) {& & & & & & & & & & & & & & & & &return "--";& & & & & & & & & & & & & & } else {& & & & & & & & & & & & & & & & &return '&shiro:hasPermission name="admin:ordervip:download"&&a class="download ml10" href="javascript:void(0)" title="下载表格"& & & & & & & & & & & & & & & & & &&i class="fa fa-file-o" aria-hidden="true"&&/i&&/a&&/shiro:hasPermission&';& & & & & & & & & & & & & & }& & & & & & & & & & & & &},& & & & & & & events: {& & & & & & & & & & & & 'click .download': function(e, value, row, index) {& & & & & & & & & & & & & & &window.open('${aapi}/orderVip/downLoad/' + row.orderNo, '_self');& & & & & & & & & & & & &}
& & & & & & & & & & & }& & & & & & & }, {& & & & & & & field: 'opt',& & & & & & & title: '操作',& & & & & & & formatter: function(value, row, index) {& & & & & & & & & & & & &return [& & & & & & & & & & & & & & & & '&shiro:hasPermission name="admin:ordervip:splitorder"&
& & & & & & & & & & & & & & & & &&a class="split ml10" href="javascript:void(0)" title="拆分订单"&
& & & & & & & & & & & & & & & & &&i class ="fa fa-wrench" aria-hidden="true"&&/i&&/a&&/shiro:hasPermission&',& & & & & & & & & & & & & & & & '&shiro:hasPermission name="admin:ordervip:update"&
& & & & & & & & & & & & & & & & &&a class="edit ml10" href="javascript:void(0)" title="修改订单"&
& & & & & & & & & & & & & & & & &&i class="glyphicon glyphicon-edit"&&/i&&/a&&/shiro:hasPermission&',& & & & & & & & & & & & & & & & '&shiro:hasPermission name="admin:ordervip:delete"&
& & & & & & & & & & & & & & & & &&a class="cancel ml10" href="javascript:void(0)" title="取消订单"&
& & & & & & & & & & & & & & & & &&i class="glyphicon glyphicon-ban-circle"&&/i&&/a&&/shiro:hasPermission&'& & & & & & & & & & & & & & & & ].join('');& & & & & & & & & & & & &}, & &//紫色为添加图标（icon），插件：font-awesome，效果图见底部。& & & & & & & events: {& & & & & & & & & & & & 'click .split': function(e, value, row, index) {& & & & & & & & & & & & & & &$.FORM.showFormDialog({& & & & & & & & & & & & & & & & &title: "拆分VIP订单",& & & & & & & & & & & & & & & & &isReadOnly: true,& & & & & & & & & & & & & & & & &dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,& & & & & & & & & & & & & & & & &templateUrl: '${aapi}/page/custom/vipOrderSplit'& & & & & & & & & & & & & & &});
& & & & & & & & & & & & &},& & & & & & & & & & & & 'click .edit': function(e, value, row, index) {& & & & & & & & if(row.state == '1') {
&$.NOTIFY.showNotice('提示', '不能修改已拆分的订单！');
& & & & & & & & & & & & & & & } else {& & & & & & & & & & & & & & & & $.FORM.showFormDialog({
& &title: "修改VIP订单",& & & & & & & & & & & & & & & & & & &postUrl: "${aapi}/orderVip/update",& & & & & & & & & & & & & & & & & & &dataSource: "${aapi}/orderVip/detail/2/" + row.orderNo,
isReadOnly: false,
templateUrl: '${aapi}/page/custom/vipModifyForm',
formId: "#vipForm", postType: "multipart",
data: {
pid: 0,
pname: "--",
level: 0
},
onPostSuccess: function() {
$("#table").bootstrapTable("refresh");
}
});
}
},
'click .cancel': function(e, value, row, index) {
if(row.state == '1') {
$.NOTIFY.showNotice('提示', '不能删除已拆分的订单！');
} else {
$.FORM.showConfirm({
title: "提示",
message: "您确认要取消订单【" + row.orderNo + "】？",
url: "${aapi}/orderVip/delete/" + row.orderNo,
autoClose: true,
successTitle: "成功",
successMessage: "订单【" + row.orderNo + "】已取消！",
onSuccess: function() {
&$("#table").bootstrapTable("refresh");
}
});& & & & & & & & & & & & & & & &}
& & & & & & & & & & & &}& & & & &}& & & & &}],
&queryParams: function(params) {& & & & & return $.extend({}, params, searchformData); & &//请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，本项目中用于自定义表格的查询，于别的文章详细阐述。& & & & & },& & & & &toolbar: "#toolbar", &//一个jQuery 选择器，指明自定义的toolbar（工具栏），将需要的功能放置在表格工具栏（默认）位置。& & & & &sidePagination: "server", &//设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置 服务器数据地址（url）或者重写ajax方法& & & & &pageNumber: 1, & &//如果设置了分页，首页页码& & & & &pageSize: 10, & //如果设置了分页，页面数据条数& & & & &pageList: [& & & & & & &10, 20, 50, 100, 200 & //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。& & & & &],& & & & &pagination: true, &//设置为&true&会在表格底部显示分页条& & & & &showRefresh: true, //显示 刷新按钮& & & & &showColumns: true, //是否显示 内容列下拉框& & & & &searchOnEnterKey: true, &//设置为&true时，按回车触发搜索方法，否则自动触发搜索方法
& & & & &search:true & //是否启用搜索框
& & & });& & }
initTable();
&分页使用后台代码写，并且返回参数order=asc&limit=10&offset=0（正序，10条，从0开始），不懂这些值是怎么设置的= =
& url: http://127.0.0.1:8081/piano/a/orderVip/list?order=asc&limit=10&offset=0
&请求成功后的表格如下图所示：
&（本篇内容还结合了bootstrap-dialog的内容。在接下来的文章中详细介绍。）
阅读(...) 评论()Sheldon_Lou
阅读(3514)
今天介绍汇总一下datatables。
公司CMS内容资讯站的后台管理界面用了大量的table来管理数据，试用了之后，感觉挺不错，推荐一下。
先上一个基本的效果图.
（图片太宽了，换了另一个模板）
介绍一下这个demo的实现。
首先是引用 js+css。
js有4个，①jquery，②bootstrap3，③datatables的js，④datatables对应bootstrap样式时用的。
为了说明问题，就不放bundle里面了。
&script src="~/Scripts/jquery-1.10.2.js"&&/script&
&script src="~/Scripts/bootstrap.js"&&/script&
&script src="~/Content/datatables/js/jquery.dataTables.js"&&/script&
&script src="~/Content/datatables/js/dataTables.bootstrap.js"&&/script&
然后是css。
有2个，①bootstrap3，②datatables对应bootstrap样式（要用这个替换datatables默认的样式，否则会出现右下角的分页样式margin很大的情况。）
&link href="~/Content/bootstrap.css" rel="stylesheet" /&
&link href="~/Content/datatables/css/dataTables.bootstrap.css" rel="stylesheet" /&
下面是html
&div class="panel panel-default"&
&div class="panel-heading"&
&div class="panel-title"&
基本的datatables
&div class="panel-body"&
&table id="table_local" class="table table-bordered table-striped table-hover"&
&th&ID&/th&
&th&FirstName&/th&
&th&LastName&/th&
&th&EnrollmentDate&/th&
&th&Discriminator&/th&
@if(Model.Count() & 0) {
@foreach(var p in Model) {
&td&@p.PersonID&/td&
&td&@p.FirstName&/td&
&td&@p.LastName&/td&
&td&@p.EnrollmentDate.GetValueOrDefault().ToString("yyyy-MM-dd HH:mm:ss")&/td&
&td&@p.Discriminator&/td&
&script type="text/javascript"&
$(function () {
$("#table_local").dataTable({
//lengthMenu: [5, 10, 20, 30],//这里也可以设置分页，但是不能设置具体内容，只能是一维或二维数组的方式，所以推荐下面language里面的写法。
paging: true,//分页
ordering: true,//是否启用排序
searching: true,//搜索
language: {
lengthMenu: '&select class="form-control input-xsmall"&' + '&option value="1"&1&/option&' + '&option value="10"&10&/option&' + '&option value="20"&20&/option&' + '&option value="30"&30&/option&' + '&option value="40"&40&/option&' + '&option value="50"&50&/option&' + '&/select&条记录',//左上角的分页大小显示。
search: '&span class="label label-success"&搜索：&/span&',//右上角的搜索文本，可以写html标签
paginate: {//分页的样式内容。
previous: "上一页",
next: "下一页",
first: "第一页",
last: "最后"
zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
//下面三者构成了总体的左下角的内容。
info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。
infoEmpty: "0条记录",//筛选为空时左下角的显示。
infoFiltered: ""//筛选之后的左下角筛选提示，
paging: true,
pagingType: "full_numbers",//分页样式的类型
$("#table_local_filter input[type=search]").css({ width: "auto" });//右上角的默认搜索文本框，不写这个就超出去了。
执行js之后，如果没有报错，那就会得到最上面的效果图。四个编号上的内容都是可以通过传入datatable()方法控制的。其中要注意，方法名是dataTable而不是DataTable，后者用于api的操作。
通过浏览器的开发者工具可以看到，四个控制块的id分别为table的id 加上 length，filter，info，paginate，所以如有需要，可以直接用js来强制控制。
编号②中的搜索框是输入内容后自动搜索表格上的所有列（当然可以通过他的api来实现搜索特定的列，比如某些隐藏列的筛选）。
通过以上4个控制，基本可以满足大部分table列表的需求。
这样的table属于一次性加载完所有数据，然后再调用js格式化。
晚上再写用ajax异步加载数据datatable。原文链接:
阅读排行榜Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列,固定标题滚动表,响应式设计，Ajax加载JSON数据，点击排序的列，卡片视图等。
你还未登录，请选登录!
分享HTML我帮您
收款人：邓志锋 luc***@
收款人：向html580网站(**锋)付钱bootstrap中使用datatables
来源：本站原创&
今天大象研究了下datatables表格，下面来介绍下datatables，我是在bootstrap中使用的，引入必须的JS后就可以开始使用了，首先表格的HTML
&div class="row-fluid"&
&div class="span12"&
&div class="box corner-all"&
&div class="box-header grd-white corner-top"&
&div class="header-control"& &a data-toggle="modal" data-target="#myModal2"&&i class="icon-external-link"&&/i&&/a& &a data-box="collapse"&&i class="icofont-caret-up"&&/i&&/a& &a data-box="close" data-hide="bounceOutRight"&&&/a& &/div&
&span&用户列表&/span& &/div&
&div class="box-body"&
&table id="datatables" class="table table-bordered table-striped responsive"&
&th&Id&/th&
&th&规则名&/th&
&th&中文名&/th&
&th&状态&/th&
&th style="width:290"&操作&/th&
&div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" style="display:"&
&div class="modal-dialog"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-hidden="false"&&&/button&
&h4 class="modal-title" id="myModalLabel"&规则编辑&/h4&
&div class="modal-body"&
&form class="form-horizontal"&
&div class="control-group"&
&label class="control-label" for="Name"&规则标识&/label&
&div class="controls"&
&input type="text" id="Name" name="Name"&
(英文小写)
&input type="hidden" name="Id" id="Id" &
&div class="control-group"&
&label class="control-label" for="Title"&规则中文名称&/label&
&div class="controls"&
&input type="text" id="Title" name="Title"&
&div class="control-group"&
&label class="control-label" for="Condition"&规则表达式&/label&
&div class="controls"&
&textarea id="Condition" name="Condition"&&/textarea&
&div class="control-group"&
&div class="controls"&
&label class="checkbox"&
&input name="Status" type="checkbox" id="Status" value="1"&
激活 &/label&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&关闭&/button&
&button type="button" class="btn btn-primary"&保存&/button&
&!-- /.modal-content --&
&!-- /.modal-dialog --&
&!-- /box-body --&
&!-- /box --&
&!-- /span --&
datatables增删改查的实现
&script type="text/javascript"&
$(function(){
var id = 0;//修改数据的ID
var table = $('#datatables');//表格对象
//获取修改时显示的数据，弹出modal模态对话框
$(document).delegate(".btn.btn-success","click",function(){
$("#myModal #myModalLabel").text("修改权限规则");
id = $(this).attr("data-title");
data={id:id}
type:"GET",
data:data,
url:"/rule/edit",
dataType:"json",
success: function(json){
if(json.status){
$("#myModal #Id").val(json.data.Id);
$("#myModal #Name").val(json.data.Name);
$("#myModal #Title").val(json.data.Title);
$("#myModal #Condition").val(json.data.Condition);
if(json.data.Status==1){$("#myModal #Status").attr("checked","checked");
}else{$("#myModal #Status").attr("checked",false);}
alert(json.msg);
$('#myModal').modal({keyboard:false,show:true})
//保存,增加和修改时都使用这个方法提交表单，区别在于修改时有ID参数而增加时没有
$(document).delegate(".modal-dialog .btn.btn-primary","click",function(){
data = $(".form-horizontal").serialize();
type:"POST",
data:data,
url:"/rule/save",
dataType:"json",
success: function(json){
alert(json.msg);
if(json.status==1){
$('#myModal').modal("hide");
table.fnClearTable();//清空数据表
//增加,弹出modal模态对话框
$("#account_add").click(function(){
$("#myModal #myModalLabel").text("增加权限规则");
$("#myModal #id").val("");
$("#myModal #name").val("");
$("#myModal #title").val("");
$("#myModal #condition").val("");
$("#myModal #status").attr("checked","checked");
$('#myModal').modal({keyboard:false,show:true})
//datatables显示列表
table.dataTable( {
"sDom": "&'row-fluid'&'span6'l&&'span6'f&r&t&'row-fluid'&'span6'i&&'span6'p&&",//定义DataTable布局的一个强大属性
"sPaginationType": "bootstrap",//分页样式使用bootstrap
"oLanguage": {//语言设置
"sLengthMenu": "每页显示
_MENU_ 条记录",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
"sZeroRecords": "抱歉， 没有找到",
"sInfoEmpty": "没有数据"
"bProcessing": true, //当datatable获取数据时候是否显示正在处理提示信息。
"bServerSide": true, //客户端处理分页
"sAjaxSource": "/rule/list", //ajax请求地址
'bStateSave': true, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的
"aoColumnDefs": [{ //给每个单独的列设置不同的填充，或者使用aoColumns也行
"aTargets": [3],
"mData": null,
"bSortable": false,
"bSearchable": false,
"mRender": function (data, type, full) {
if(full[3] == 1){
return "使用中"
}else if(full[3] == 0){
return "禁用"
"aTargets": [4],
"mData": null,
"bSortable": false,
"bSearchable": false,
"mRender": function (data, type, full) {
return '&a data-toggle="modal" data-target="#myModal"
data-title="' + full[0] + '"
class="btn btn-success" href="#"&&i class="icon-edit icon-white"&&/i&修改&/a&' +'&&'+'&a
data-title="' + full[0] + '"
class="btn btn-primary" href="/config/edit?aid=' + full[0] + '"&&i class="icon-wrench icon-white" &&/i&配置&/a&' +'&&'+'&a
alt="' + full[2] + '"
class="btn btn-info" href="#"
data-toggle="modal" data-target="#daima"&&i class="icon-tasks icon-white"&&/i&代码&/a&' +'&&'+'&a
data-title="' + full[0] + '"
class="btn btn-warning" href="/service/show?aid=' + full[0] + '"&&i class="icon-user icon-white"&&/i&客服&/a&';
服务端返回数据为JSON格式的，需要你返回的是这样的JSON格式，我使用了GO来返回这些数据，你也可以使用PHP或者其它程序返回
"aaData": [
"基本面夺555",
"什么呀5566",
"rule_show",
"权限规则显示",
"rule_save",
"权限规则编辑",
"rule_del",
"权限规则删除",
"account/show",
"帐户显示权限",
"account/edit",
"帐户修改权限",
"account/save",
"帐户编辑权限",
"iTotalDisplayRecords": 7,
"iTotalRecords": 7,
"sEcho": "1"
golang处理部分
* 显示datatables列表页数据
func (this *RuleController) List() {
var rule models.Rule
aColumns := []string{
maps, count, counts := d.Datatables(aColumns, rule, this.Ctx.Input)
var output = make([][]interface{}, len(maps))
for i, m := range maps {
for _, v := range aColumns {
output[i] = append(output[i], m[v])
data := make(map[string]interface{}, count)
data["sEcho"] = this.GetString("sEcho")
data["iTotalRecords"] = counts
data["iTotalDisplayRecords"] = count
data["aaData"] = output
this.Data["json"] = data
this.ServeJson()
golang具体处理过程
* aColumns []string `SQL Columns to display`
* thismodel interface{} `SQL model to use`
* ctx *context.Context `Beego ctx which contains httpcontext`
* maps []orm.Params `return result in a interface map as []orm.Params`
* count int64 `return iTotalDisplayRecords`
* counts int64 `return iTotalRecords`
func Datatables(aColumns []string, thismodel interface{}, Input *context.BeegoInput) (maps []orm.Params, count int64, counts int64) {
* 分页请求
iDisplayStart, _ := strconv.Atoi(Input.Query("iDisplayStart"))
iDisplayLength, _ := strconv.Atoi(Input.Query("iDisplayLength"))
* Ordering
* 排序请求
querysOrder := []string{}
if iSortCol_0, _ := strconv.Atoi(Input.Query("iSortCol_0")); iSortCol_0 & -1 {
ranges, _ := strconv.Atoi(Input.Query("iSortingCols"))
for i := 0; i & i++ {
istring := strconv.Itoa(i)
if iSortcol := Input.Query("bSortable_" + Input.Query("iSortCol_"+istring)); iSortcol == "true" {
sordir := Input.Query("sSortDir_" + istring)
thisSortCol, _ := strconv.Atoi(Input.Query("iSortCol_" + istring))
if sordir == "asc" {
querysOrder = append(querysOrder, aColumns[thisSortCol])
querysOrder = append(querysOrder, "-"+aColumns[thisSortCol])
* Filtering
* 快速过滤器
//querysFilter := []string{}
cond := orm.NewCondition()
if len(Input.Query("sSearch")) & 0 {
for i := 0; i & len(aColumns); i++ {
cond = cond.Or(aColumns[i]+"__icontains", Input.Query("sSearch"))
/* Individual column filtering */
for i := 0; i & len(aColumns); i++ {
if Input.Query("bSearchable_"+strconv.Itoa(i)) == "true" && len(Input.Query("sSearch_"+strconv.Itoa(i))) & 0 {
cond = cond.And(aColumns[i]+"__icontains", Input.Query("sSearch"))
* 数据请求
o := orm.NewOrm()
qs := o.QueryTable(thismodel)
counts, _ = qs.Count()
qs = qs.Limit(iDisplayLength, iDisplayStart)
qs = qs.SetCond(cond)
for _, v := range querysOrder {
qs = qs.OrderBy(v)
qs.Values(&maps)
count, _ = qs.Count()
return maps, count, counts
今天大象研究了下datatables表格,下面来介绍下datatables,我是在bootstrap中使用的,引入必须的JS后就可以开始使用了,首先表格的HTML &div class=&row-fluid&& &div class=&span12&& &div class=&box corner-all&& &div class=&box-header grd-white corner-top
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.不过在使用的过程中,我们还是会遇到各种小问题,今天我们探讨的就是个人在使用中遇到的一个小BUG的修复. bootstrap为我们提供了很多方便的页面控件,modal就是其中之一.很多人在使用modal时遇到了esc键按下无法关闭的问题,即使显式传入keyboard选项也不生效. $('#editFormItemModa
答案来自老外/questions//twitter-bootstrap-modal-blocks-text-input-field $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); 这个是国内同学的解决方法: /question/869 //显示modal $(
1.Js 文件引入的顺序:jquery.js bootstrap-transition.js bootstrap-carousel.js 2.&a class=&carousel-control left& href=&#myCarousel& data-slide=&prev&&翻页的箭头应该放在&div class=&carousel-inner&&外面 &script src=&j
原创翻译自DataTables官网:Twitter Bootstrap 2 Twitter 的UI框架Bootstrap的V2版本比V1有了一系列的改进.然而,主要升级中最令人期待的是一些API的改变.例如,这篇博文是一篇老的bootstrap 1.4和datatables结合的教程的更新,来展示如何把DataTables和Bootstrap 2结合在一起. 关于DataTables和Bootstrap 2集成的一些改变: * table classes的名字改变 * 格栅系统从16列变成12列
原创翻译自DataTables官网的BLOG:Twitter Bootstrap Twitter Bootstrap是一个让你快速和方便的创建统一风格的CCS框架.好消息是你可以相当容易地集成Bootstrap和DataTables,使 DataTables 和你的站点其他部分使用同样的样式.在这篇文章里我将会展示怎样把Bootstrap和DataTables集成在一起. 要完成它们的集成,有三个基本的区域需要我们注意: * Layout 布局 * Sorting controls 排序控制 *
浏览器开发人员最后将其支持全都聚集在标准上,比如 HTML5.级联样式表 2 级 (CSS2) 和 CSS3.这些标准减少了浏览器行为自 Web 全面启动开始以来困扰开发人员和设计人员的许多不合理变化.为了掩盖遗留问题并适应遗留浏览器,一些开发人员创作出了 Web 页面框架.这类工具使得即使是普通人也可以开发适合大多数用户的网站. 其中一个最受欢迎的 Web 页面框架来自一个预料之外的来源.Twitter 的开发人员厌倦了设法解决用于网页开发的许多不同组件.他们创建了单一的框架来提供 Web 页
引:Bootstrap采用的是一个&响应式&设计.响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法.例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手机的屏幕 尺寸远小于计算机显示器,但是你却没有感觉到任何差别,两者的用户体验几乎一样,这说明这个网站在响应式设计方面做得很好(响应式:简单可以理解为不同的 设备屏幕的大小是不同的,但是页面中的内容是固定的,为了让用户在不同大小屏幕看到的内容更加友好,页面的内容或排版需要更随屏幕的变化而变化
Bootstrap 简介 Bootstrap是非常流行的前端框架,使用它可以快速构建出简洁大方的界面,同时能够适配 PC.平板和手机,前端工程师可以节省出很多写样式的时间.前端框架的核心在于已经把 web 上常见的控件预先定义好样式,使用的时候直接引用即可. 常见的 Bootstrap 控件 列举几个 web 网站最常见的控件:导航.tab 标签.翻页.按钮.表单,它们在 Bootstrap 里是这样子的: 导航↓ tab 标签↓ 翻页↓ 按钮↓ 当然还有其他很多标准化的控件,丰富程度几乎囊括了
Web前端开发者每天都与HTML.CSS.JavaScript打交道,然而不少人都是周而复始地写模板.样式和交互效果,并没有想过如何将这些重复的工作整合在一起.Twitter推出的Bootstrap能够帮助Web前端开发者摆脱这种重复劳动. Bootstrap的历史 为了应对复杂的需求,早期的Twitter前端工程师在开发网站时几乎采用了所有自己熟悉的前端库.造成了网站维护困难.扩展性不强.开发成本高等问题.此时BootStrap被提上了日程.Twitter要求前端工程师完全依靠这一单一框架进行
less在Bootstrap中的应用 /5209 怎么把 Bootstrap 用到项目中? /question/ Bootstrap-由less来架构Bootstrap http://blog.csdn.net/lowkeysk/article/details/.Bootstrap的来由和发展. /articles/building-
作为一名新手web程序员,写前台确实很让人困扰,前段时间在网上无意看到了bootstrap更新,但是不知道是干什么的,下载下来还以为是网页模板,结果不是,呵!呵!好了,不炫耀智商了,进入正题. 这是一篇自己学习bootstrap的笔记,同时分享给和我一样2B的人,还请高手纠错,但是麻烦吐槽的时候口下留情. 资源链接:bootstrap资源与中文帮助文档 /s/aOjgvFZ3rGkT7 英文版的帮助文档这里不提供下载链接,还麻烦大家自己在官方网站上下载
还是需要先声明一下,这些文章都是自己初学时写的,内容非常的浅显而且说不定还有错误,请大家在学习的时候要擦亮双眼. 先介绍怎么使用bootstrap吧,在需要使用的项目中,要进入bootstrap的链接. &!-- 需要的head标签中引入css文件 --& &link href=&bootstrap/css/bootstrap.css& rel=&stylesheet&& &!-- 在使用js时,需要在body中引入js文件 -->
江湖中那场异常惨烈的厮杀,如今都快被人遗忘了.当年,所有的武林同道为了同一个敌人都拼尽了全力,为数不多的幸存者心灰意冷,隐姓埋名,远赴他乡,他们将唯一的希望寄托给时间.少年子弟江湖老,红颜少女的鬓边也有了白发.多年以后,听闻那个魔头也不久于人世,他们欣欣然回乡,却发现当初殚精竭虑研究出来对付敌人的招数全无用处,曾经受人尊敬的大侠现在被称为--新手 or 菜鸟.月下小酌,孤独的他们对着夜空举起酒杯,吼一声:&走你,IE6!& -------------------------------
结束Bootstrap进入Catalina 在Bootstrap中完成所有初始化,正式进入Catalina 1.Bootstrap中的init方法最末尾就是: paramTypes[0] = Class.forName(&java.lang.ClassLoader&); catalinaLoader.loadClass (&org.apache.catalina.startup.Catalina&); Object startupInstance = startup
前言 首先阅读本文之前建议先看一下Bootstrap基础以及Less简介,不然你不会知道我在云什么.因为最近打算用Bootstrap+Less进行开发,但是Less虽然有一些资料,不过大都是Example类型的,感觉比较抽象更像是API,在网上又找不到比较好的解说,所以打算自己写点. 对Bootstrap和Less有兴趣的可以看一下官网(中文):/和/p/lesscss/. 正文 在Github上维护的Boo
Zend Framework编程:Bootstrap.php Bootstrap,顾名思义就是系鞋带,指出发之前做的准备工作.自从Zend Framework 1.8 以后,Zend Framework 出了Zend_tool 和Zend_Application,因此Bootstrap有了比较大的调整,基本来讲,只需要在index.php中调用Zend_Application,就可以直接免去过去设定config文件,DB,view等.如果需要对这些做特别设置,可以在Bootstrap中扩展Zen
变量 - clearfix - 获取BootStrap源码.其zip文件只有css,没有less,因此先从GitHub获取开发代码: $ git clone git:///twitter/bootstrap.git $ cd bootstrap/less 网上有一份less.vim,用Vim阅读LESS文件语法高亮: $ wget http://leafo.net/lessphp/vim/less.vim$ mv less.vim ~/.vim/syntax/$ vi ~/.
前言 首先阅读本文之前建议先看一下Bootstrap基础以及Less简介, 不然你不会知道我在云什么.因为最近打算用Bootstrap+Less进行开发,但是Less虽然有一些资料,不过大都是Example类型的,感觉比 较抽象更像是API,在网上又找不到比较好的解说,所以打算自己写点. 对Bootstrap和Less有兴趣的可以看一下官网(中文):/和/p/lesscss/. 正文 在Github上维护的B
如果你还没有开始使用Bootstrap模板,那你可真是有够OUT,这是一个帮助你快速开发的工具,Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件.Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮.功能完备的网站.其中包括以下组件:下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等. 今天我们带来的
