bootstrap-table自己配置function initTable(){
var methodNameSearch=$(&#methodNameSearch&).val();
var requestUrl = &/manage/json/validateMethodDefineSearchList.json?methodNameSearch=& + methodNameS
var $table = $('#table');
$table.bootstrapTable({
url: requestUrl,
method: 'get',
//请求方式（*）
//toolbar: '#toolbar',
//工具按钮用哪个容器
striped: true,
//是否显示行间隔色
cache: false,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,
//是否显示分页（*）
sortable: false,
//是否启用排序
sortOrder: &asc&,
//排序方式
//queryParams: queryParams,//传递参数（*）
pageNumber:1,
//初始化加载第一页，默认第一页
pageSize: 20,
//每页的记录行数（*）
pageList: [10, 20, 50, 100],
//可供选择的每页的行数（*）
//search: true,
//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
//strictSearch: true,
//showColumns: true,
//是否显示所有的列
//showRefresh: true,
//是否显示刷新按钮
minimumCountColumns: 2,
//最少允许的列数
clickToSelect: true,
//是否启用点击选中行
uniqueId: &id&,
//每一行的唯一标识，一般为主键列
showToggle:false,
//是否显示详细视图和列表视图的切换按钮
sidePagination: &server&, //服务端处理分页
columns: [
{title: 'id',field: 'id', visible: false, align: 'center',valign: 'middle'},
{title: '名称',field: 'methodName',align: 'center',valign: 'middle'},
{title: '&span style=&font-family:Microsoft YaH&&类名&/span&',field: 'methodCode',align: 'center',valign: 'middle'},
{title: '组名隐藏',field: 'methodGroup', visible: false, align: 'center',valign: 'middle'},
{title: '组名',field: 'methodGroupName',align: 'center',valign: 'middle'},
{title: '操作',field: '#',align: 'center',
formatter:function(value,row,index){
var e = '&a href=&#& mce_href=&#&
row.id + '\',\'' +row.methodName+ '\',\'' +row.methodCode+ '\',\'' +row.methodGroup+'\')&&编辑&/a& ';
var d = '&a href=&#& mce_href=&#&
row.id +'\')&&删除&/a& ';
return e+d;
}function onEditClick(id, methodName, methodCode, methodGroup) {
var requestUrl = &/manage/validateMethodDefineAdd.vm?validateMethodDefineId=& + id
+&&methodName=& + methodName+&&methodCode=& + methodCode+&&methodGroup=& + methodG
window.location = requestU
}转载请注明：
以上就介绍了bootstrap-table自己配置，包括了方面的内容，希望对Javascript教程有兴趣的朋友有所帮助。
本文网址链接：/article/detail_517264.html
上一篇： 下一篇：Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
本文为大家提供的是一个使用bootstrap实现的table列表示例代码，感兴趣的同学参考下。
&html lang="en"&
&title&table&/title&
&meta charset="utf-8" /&
&meta http-equiv="X-UA-Compatible" content="IE=edge" /&
&meta name="viewport" content="width=device-width,initial-scale=1" /&
&link href="../book/css/bootstrap.css" rel="stylesheet" type="text/css" /&
&div class="table-responsive"&
&table id="tb" class="table table-bordered table-hover"&
&th class="col-md-2"&编号&/th&
&th class="col-md-5"&国家&/th&
&th class="col-md-5"&名称&/th&
&tbody id="tbody"&
&tr class="active"&&td&1&/td&&td&魏国&/td&&td&曹操&/td&&/tr&
&tr&&td&2&/td&&td&魏国&/td&&td&张辽&/td&&/tr&
&tr&&td&3&/td&&td&魏国&/td&&td&司马懿&/td&&/tr&
&tr&&td&4&/td&&td&魏国&/td&&td&夏侯淳&/td&&/tr&
&tr class="active"&&td&5&/td&&td&蜀国&/td&&td&刘备&/td&&/tr&
&tr&&td&6&/td&&td&蜀国&/td&&td&关羽&/td&&/tr&
&tr&&td&7&/td&&td&蜀国&/td&&td&张飞&/td&&/tr&
&tr&&td&8&/td&&td&蜀国&/td&&td&赵云&/td&&/tr&
&tr class="active"&&td&9&/td&&td&吴国&/td&&td&孙权&/td&&/tr&
&tr&&td&10&/td&&td&吴国&/td&&td&周瑜&/td&&/tr&
&tr&&td&11&/td&&td&吴国&/td&&td&鲁肃&/td&&/tr&
&tr&&td&12&/td&&td&吴国&/td&&td&黄盖&/td&&/tr&
Copyright &
All Rights Reserved &&&&&&温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
&&&&$('#example').dataTable({
"sScrollX": "100%",&& //表格的宽度 &&"sScrollXInner": "110%",&& //表格的内容宽度&&"bScrollCollapse": true,& //当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)& "bPaginate": true,& //是否显示分页&&"bLengthChange": true,& //每页显示的记录数&&"bFilter": true, //搜索栏&&"bSort": true, //是否支持排序功能&&"bInfo": true, //显示表格信息&&"bAutoWidth": false,& //自适应宽度&&"aaSorting": [[1, "asc"]],& //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc&&"aoColumns": [&&&&&&null,&&&&&&null,&&&&&&{ &&&&&&&&&&"bVisible": true, //不可见&&&&&&&&&&"bSearchable": false, //参与搜索&&&&&&},&&&&&&null,&&&&&&null&&], //列设置，表有几列，数组就有几项&&&"bStateSave": true, //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了&&"sPaginationType": "full_numbers", //分页，一共两种样式，full_numbers和two_button(默认)&&"oLanguage": {&&&&&&"sLengthMenu": "每页显示 _MENU_ 条记录",&&&&&&"sZeroRecords": "对不起，查询不到任何相关数据",&&&&&&"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",&&&&&&"sInfoEmtpy": "找不到相关数据",&&&&&&"sInfoFiltered": "数据表中共为 _MAX_ 条记录)",&&&&&&"sProcessing": "正在加载中...",&&&&&&"sSearch": "搜索",&&&&&&"sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt&&&&&&"oPaginate": {&&&&&&&&&&"sFirst":&&& "第一页",&&&&&&&&&&"sPrevious": " 上一页 ",&&&&&&&&&&"sNext":&&&& " 下一页 ",&&&&&&&&&&"sLast":&&&& " 最后一页 "&&&&&&}&&}, //多语言配置&"bJQueryUI": false, //可以添加 jqury的ui theme& 需要添加css
&&&&&&&"aLengthMenu": [[10, 25, 50, -1, 0], ["每页10条", "每页25条", "每页50条", "显示所有数据", "不显示数据"]]& //设置每页显示记录的下拉菜单&&&&});});
直接调用默认的设置
$('#example').dataTable();
阅读(20276)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'Bootstrap Datatable 简单的基本配置',
blogAbstract:'$(document).ready(function() {&&&&$(\'#example\').dataTable({\n\"sScrollX\": \"100%\",&& //表格的宽度 &&\"sScrollXInner\": \"110%\",&& //表格的内容宽度&&\"bScrollCollapse\": true,& //当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)& \"bPaginate\": true',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:5,
permalink:'blog/static/',
commentCount:3,
mainCommentCount:2,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}