表格在平台开发过程中很重要能够方便的查询使用，bootstrap开发过程中的

用的比较多的是bootstrap-table连接http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

还有datatables连接http://datatables.club/example/#data_sources，目前用的是第一种，使用中需要注意

的是，第二次请求的可用性以及table的高度合理不要拉两次滚动条实现下拉。

　　使用样例代码

html

<div class="widget-box">
<table id="table"></table>
</div>

js

var $table = $(‘#table‘);
var first = 0;
$(document).ready(function() {
document.getElementById("alModelMenu").className = "submenu open";
document.getElementById("userModel").className = "active";

$("#queryDataBtn").click(function() {
var pins = $.trim($(‘#pins‘).val());

if (pins.replace(/[，;: ；：]/ig,"") == "") {
$(‘#pins‘).focus();
alert("请输入有效 pin 列表！");
return ;
}
pins = pins.replace(/[，;: ；：]/ig,",");
$(‘#pins‘).val(pins);

var url = "getUserPicture.do?pins="+pins;
if(first==0){
first=1;
var clientHight = document.body.clientHeight*0.38;
$table.bootstrapTable({
url: url,
height: clientHight,
columns: [ {
field: ‘pin‘,
title: ‘用户‘
}, {
field: ‘shopOrder‘,
title: ‘购买店铺‘
}, {
field: ‘shopView‘,
title: ‘查看店铺‘
}, {
field: ‘pinCate3Prefer‘,
title: ‘三级品类偏好‘
}, {
field: ‘pinCate2Prefer‘,
title: ‘二级品类偏好‘
}, {
field: ‘pinCatePrefer‘,
title: ‘二三级偏好混排‘
} , {
field: ‘cmPin‘,
title: ‘移动、pc沉睡用户‘
} , {
field: ‘lepin‘,
title: ‘用户等级‘
}, {
field: ‘pinPriBra‘,
title: ‘偏好价格段‘
}, {
field: ‘PinCate3Brand‘,
title: ‘三级品牌偏好‘
}, {
field: ‘realTimePinCate3Prefer‘,
title: ‘实时三级品类偏好‘
}, {
field: ‘realTimePinCate2Prefer‘,
title: ‘实时二级品类偏好‘
}, {
field: ‘pinCate3PreferShort‘,
title: ‘短期偏好‘
}, {
field: ‘disoffLineVTagPrefer‘,
title: ‘内容偏好‘
} , {
field: ‘pinCat3‘,
title: ‘三级品类购买周期‘
} , {
field: ‘pinCate1Prefer‘,
title: ‘一级品类偏好‘
} , {
field: ‘pinCate1PreferLong‘,
title: ‘长期一级价格品类偏好‘
} , {
field: ‘pinCate3PreferVirtual‘,
title: ‘虚拟品类三级品类偏好‘
} , {
field: ‘pinPreferenceShop‘,
title: ‘实时店铺‘
} ]
});
}else{
$table.bootstrapTable(‘refresh‘,{url: url});
}
});

$("#idPin").click(function(){
if($("#idPin").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘pin‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘pin‘);
}
});

$("#idShopOrder").click(function(){
if($("#idShopOrder").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘shopOrder‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘shopOrder‘);
}
});

$("#idShopView").click(function(){
if($("#idShopView").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘shopView‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘shopView‘);
}
});

$("#idPinPreferenceShop").click(function(){
if($("#idPinPreferenceShop").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘pinPreferenceShop‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘pinPreferenceShop‘);
}
});

$("#idPinCate1Prefer").click(function(){
if($("#idPinCate1Prefer").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘pinCate1Prefer‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘pinCate1Prefer‘);
}
});

$("#idPinCate2Prefer").click(function(){
if($("#idPinCate2Prefer").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘pinCate2Prefer‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘pinCate2Prefer‘);
}
});

$("#idPinCate3Prefer").click(function(){
if($("#idPinCate3Prefer").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘pinCate3Prefer‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘pinCate3Prefer‘);
}
});

$("#idPinCatePrefer").click(function(){
if($("#idPinCatePrefer").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘pinCatePrefer‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘pinCatePrefer‘);
}
});

$("#idDisoffLineVTagPrefer").click(function(){
if($("#idDisoffLineVTagPrefer").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘disoffLineVTagPrefer‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘disoffLineVTagPrefer‘);
}
});

$("#idPinCate1PreferLong").click(function(){
if($("#idPinCate1PreferLong").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘pinCate1PreferLong‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘pinCate1PreferLong‘);
}
});

$("#idCmPin").click(function(){
if($("#idCmPin").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘cmPin‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘cmPin‘);
}
});

$("#idLepin").click(function(){
if($("#idLepin").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘lepin‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘lepin‘);
}
});

$("#idPinPriBra").click(function(){
if($("#idPinPriBra").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘pinPriBra‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘pinPriBra‘);
}
});

$("#idPinCate3Brand").click(function(){
if($("#idPinCate3Brand").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘PinCate3Brand‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘PinCate3Brand‘);
}
});

$("#idRealTimePinCate2Prefer").click(function(){
if($("#idRealTimePinCate2Prefer").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘realTimePinCate2Prefer‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘realTimePinCate2Prefer‘);
}
});

$("#idRealTimePinCate3Prefer").click(function(){
if($("#idRealTimePinCate3Prefer").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘realTimePinCate3Prefer‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘realTimePinCate3Prefer‘);
}
});

$("#idPinCate3PreferShort").click(function(){
if($("#idPinCate3PreferShort").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘pinCate3PreferShort‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘pinCate3PreferShort‘);
}
});

$("#idPinCat3").click(function(){
if($("#idPinCat3").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘pinCat3‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘pinCat3‘);
}
});

$("#idPinCate3PreferVirtual").click(function(){
if($("#idPinCate3PreferVirtual").attr("checked")==‘checked‘){
$table.bootstrapTable(‘showColumn‘, ‘pinCate3PreferVirtual‘);
}else{
$table.bootstrapTable(‘hideColumn‘, ‘pinCate3PreferVirtual‘);
}
});

//复选框的值.
$("#all").click(function() {
if ($(this).attr("checked") == ‘checked‘) { // 全选
$("input[name=‘clusters‘]").each(function() {
$(this).attr("checked", "checked");
$table.bootstrapTable(‘showColumn‘, ‘pin‘);
});
} else { // 取消全选
$("input[name=‘clusters‘]").each(function() {
$(this).removeAttr("checked");
$table.bootstrapTable(‘hideColumn‘, ‘pin‘);
});
}
});

});

平台开发中的表格