bootstrap-table分頁模闆和擷取表中的ID

1.dao層

MyBatis映射

mapper.xml中

select * from TB_COMMUNICATION_DEVICE_TBL ORDER BY ${ordername} ${order}

</select>

mapper.java中

public List<Tb_communication_device_tbl> getTcdt(Mydata data);//分頁查詢

1.業務層service

@Override

public JSONObject getTcdt(Mydata data) {

// TODO Auto-generated method stub

JSONObject result=null;

List<Tb_communication_device_tbl> md=tbdao.getTcdt(data);

List<Tb_communication_device_tbl> resultList = new ArrayList<Tb_communication_device_tbl>() ;

//判斷前台頁面傳回的值是不是空不是進行條件模糊查詢

if(null!=data.getStationNr() && !data.getStationNr().trim().equals("")||data.getWellDbk()!=null&&data.getWellDbk().trim().equals("")){

for(Tb_communication_device_tbl user :md){

if(user.getStationNr().indexOf(data.getStationNr()) >= 0){

resultList.add(user);

}

}else{

resultList = md;

}

//擷取分頁資料

int pageNumber = null!=data.getDangqian() ? Integer.parseInt(data.getDangqian()) : 0;

int pageSize = null!=data.getFrist() ? Integer.parseInt(data.getFrist()) : 10;

int start = (pageNumber) * pageSize;//計算開始記錄數

int end = start+pageSize;//計算結束記錄數

md= new ArrayList<Tb_communication_device_tbl>() ;

for(int i=start;i<end && i<resultList.size();i++){

Tb_communication_device_tbl e=resultList.get(i);

md.add(e);

}

int total=0;

//存儲值map中

Map<String, Object> map=new HashMap<String, Object>();

SimpleDateFormat sf=new SimpleDateFormat("yyyy-MM-dd");

//實作資料類型轉換主要是日期類型轉換成字元串

List<Mydate> list=new ArrayList<>();

for (int i = 0; i < md.size(); i++) {

Mydate my=new Mydate();

my.setAlarmVoltage(md.get(i).getAlarmVoltage());

my.setBatteryElectricQty(md.get(i).getBatteryElectricQty());

my.setInstallDate(sf.format(md.get(i).getInstallDate()));

//my(md.get(i)));

my.setDeviceClass((md.get(i).getDeviceClass()));

my.setLevelElevationAlarm((md.get(i).getLevelElevationAlarm()));

my.setNewWellDbk(md.get(i).getNewWellDbk());

my.setOperationDate(sf.format(md.get(i).getOperationDate()));

my.setReadoutFrequency(md.get(i).getReadoutFrequency());

my.setRemark(md.get(i).getRemark());

my.setReturenValueBln(md.get(i).getReturenValueBln());

my.setShowingBln(md.get(i).getShowingBln());

my.setSignalAlarm(md.get(i).getSignalAlarm());

my.setSimcardNr(md.get(i).getSimcardNr());

my.setStationNr(md.get(i).getStationNr());

my.setTransmittingFrequency(md.get(i).getTransmittingFrequency());

my.setUserId(md.get(i).getUserId());

my.setWaterTemperatureAlarm(md.get(i).getWaterTemperatureAlarm());

my.setWellDbk(md.get(i).getWellDbk());

my.setWorkingStatus(md.get(i).getWorkingStatus());

list.add(my);

}

map.put("total", resultList.size());

map.put("rows", list);

//存入傳回值中

result=JSONObject.fromObject(map);

return result;

}

3.action層

public String execute(){

String pageNO=null;

String pageSize=null;

if(offset==null||limit==null){

pageNO ="0";

pageSize="10";

}else{

pageNO =offset;

pageSize=limit;

}

//給對象指派

Mydata data=new Mydata();

data.setDangqian(pageNO);

data.setFrist(pageSize);

//System.out.println(wells);

data.setStationNr(departmentname);

data.setWellDbk(wells);

data.setOrder(order);

//點選列頭擷取屬性因為屬性和資料庫列名不一樣是以排序要進行修改列名

if(ordername==null){

data.setOrdername("STATION_NR");

}

if(ordername!=null){

if(ordername.equals("deviceClass")){

data.setOrdername("DEVICE_CLASS");

}

if(ordername.equals("stationNr")){

data.setOrdername("STATION_NR");

}

if(ordername.equals("batteryElectricQty")){

data.setOrdername("BATTERY_ELECTRIC_QTY");

}

if(ordername.equals("simcardNr")){

data.setOrdername("SIMCARD_NR");

}

if(ordername.equals("wellDbk")){

data.setOrdername("WELL_DBK");

}

if(ordername.equals("installDate")){

data.setOrdername("INSTALL_DATE");

}

result=tb_communication_device_tblservice.getTcdt(data);

list=tB_MONITOR_WELL_TBLservice.getTmwt();//擷取外鍵的值

Map<String, Object> map=ActionContext.getContext().getSession();

map.put("list", list);//

map.put("offset2", offset);

map.put("limit1", limit);

return SUCCESS;

}

js檔案

var TableInit = function () {

var oTableInit = new Object();

var stationNr=null;

var stationNr2=null;

var arr=new Array();

var arr1=new Array();

//定義查詢方法

Array.prototype.indexOf = function(val) {

for (var i = 0; i < this.length; i++) {

if (this[i] == val) return i;

}

return -1;

};

Array.prototype.remove = function(val) {

var index = this.indexOf(val);

if (index > -1) {

this.splice(index, 1);

}

};

//初始化Table

oTableInit.Init = function () {

$('#tb_departments').bootstrapTable({

url: 'tcdtaction', //請求背景的URL（*）

method: 'get', //請求方式（*）

toolbar: '#toolbar', //工具按鈕用哪個容器

striped: false, //是否顯示行間隔色

cache: false, //是否使用緩存，預設為true，是以一般情況下需要設定一下這個屬性（*）

pagination: true, //是否顯示分頁（*）

sortable: true, //是否啟用排序

sortOrder: "asc", //排序方式

queryParams: oTableInit.queryParams, //傳遞參數（*）

sidePagination: "server", //分頁方式：client用戶端分頁，server服務端分頁（*）

pageNumber: 1, //初始化加載第一頁，預設第一頁

pageSize: 10, //每頁的記錄行數（*）

pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）

search: false, //是否顯示表格搜尋，此搜尋是用戶端搜尋，不會進服務端，是以，個人感覺意義不大

strictSearch: false,//設定為 true啟用全比對搜尋，否則為模糊搜尋

// showExport表示是否顯示導出的按鈕，exportDataType表示導出的模式是目前頁、所有資料還是選中資料。

sortable:true,//設定為false 将禁止所有列的排序

searchOnEnterKey:true,//設定為 true時，按回車觸發搜尋方法，否則自動觸發搜尋方法

showColumns: true, //是否顯示所有的列

showRefresh: true, //是否顯示重新整理按鈕

showExport: true,//是否顯示導出

showpaginationswitch:true,//是否顯示資料條數選擇框

minimumCountColumns: 2, //最少允許的列數

clickToSelect: true, //是否啟用點選選中行

height: 532, //行高，如果沒有設定height屬性，表格自動根據記錄條數覺得表格高度

uniqueId: "id", //每一行的唯一辨別，一般為主鍵列

showToggle: true, //是否顯示詳細視圖和清單視圖的切換按鈕

cardView: false, //是否顯示詳細視圖

detailView: true, //是否顯示父子表

exportTypes: ['csv','txt','xml'],

exportDataType: "basic",

columns: [{

align: "center",

checkbox: true

{

field: 'stationNr',

title: '站号',

align: "center",

sortable: true,

editable: true

}, {

field: 'deviceClass',

title: '通訊裝置類型',

align: "center",

sortable: true,

editable: true

}, {

field: 'batteryElectricQty',

title: '電池電量',

align: "center",

sortable: true,

editable: true

{

field: 'simcardNr',

title: 'SIM卡号',

align: "center",

sortable: true,

editable: true

{

field: 'wellDbk',

title: '統一編号',

sortable: true,

align: "center",

editable: true

{

field: 'installDate',

title: '安裝日期',

sortable: true,

align: "center",

editable: true

{

field: 'operate',

title: '操作',

sortable: true,

align: "center",

editable: true,

formatter:function(value,row,index){

var e = '<a οnclick="edit(\''+ row.stationNr + '\')">檢視詳情</a> ';

return e;

}

onCheckAll:function(rows){//全選中

var arr2=new Array();

var arr3=new Array();

arr2=$("#tb_departments").bootstrapTable('getSelections');

for (var i = 0; i < arr2.length; i++) {

arr3=arr2[i]

for(var s in arr3)

arr.push(arr3.stationNr);//添加數值到數組\

}

var n = []; //一個新的臨時數組

for(var h = 0; h < arr.length; h++) //周遊目前數組

{

//如果目前數組的第i已經儲存進了臨時數組，那麼跳過，

//否則把目前項push到臨時數組裡面

if (n.indexOf(arr[h]) == -1){

n.push(arr[h]);

}

arr=n

document.getElementById("ddd").value=arr;

onUncheckAll:function(rows){//全選不中

arr=[];//清空數組

document.getElementById("ddd").value=arr;

onUncheck:function(row){//不選中

stationNr2=row.stationNr; //取出id

arr.remove(stationNr2);

document.getElementById("ddd").value=arr;

onCheck:function(row){//選中

//alert("2")

stationNr2=row.stationNr; //取出id

arr.push(stationNr2);//添加數值到數組\

//去除重複元素

var s = arr.join(",")+",";

for(var i=0;i<arr.length;i++) {

if(s.replace(arr[i]+",","").indexOf(arr[i]+",")>-1) {

arr.remove(arr[i]);

document.getElementById("ddd").value=arr;

break;

}

document.getElementById("ddd").value=arr;

onClickRow:function(row,$element){

$('.success').removeClass('success');

$($element).addClass('success');

stationNr2=row.stationNr;

arr.push(stationNr2);//添加數值到數組

//定義查詢方法

Array.prototype.indexOf = function(val) {

for (var i = 0; i < this.length; i++) {

if (this[i] == val) return i;

}

return -1;

};

Array.prototype.remove = function(val) {

var index = this.indexOf(val);

if (index > -1) {

this.splice(index, 1);

}

};

//去除重複元素

var s = arr.join(",")+",";

for(var i=0;i<arr.length;i++) {

if(s.replace(arr[i]+",","").indexOf(arr[i]+",")>-1) {

arr.remove(arr[i]);

document.getElementById("ddd").value=arr;

break;

}

document.getElementById("ddd").value=arr;

}

});

};

//得到查詢的參數

oTableInit.queryParams = function (params) {

var temp = { //這裡的鍵的名字和控制器的變量名必須一直，這邊改動，action也需要改成一樣的

limit: params.limit, //頁面大小

offset: params.offset, //頁碼

order: params.order,

ordername: params.sort,//傳回排序列名

//pageSize: params.pageSize, //頁面大小

//pageNumber: params.pageNumber, //頁碼

departmentname: $("#departmentname").val(),//傳回查詢條件

wells: $("#wells").val(),

};

return temp;

};

return oTableInit;

};

var ButtonInit = function () {

var oInit = new Object();

var postdata = {};

oInit.Init = function () {

//初始化頁面上面的按鈕事件

};

return oInit;

};

bootstrap-table分頁模闆和擷取表中的ID

繼續閱讀

bootstrapTable分頁、模糊查詢、資料重新整理、頁面跳轉。。。各種坑

bootstrap-table checkbox(複選框)初始化部分選中

bootstrap-table自定義複選框列的樣式

SpringMvc+Mybatis+Pagehelper分頁詳解

bootstrap-table 插件表頭與内容不對齊解決方式

bootstrap-table組合表頭，Excel表格樣式bootstrap-table組合表頭，Excel表格樣式

bootstrap -table單元格，删除，修改事件

十五、bootstrap-table editable

bootstrap-table 可編輯行插件 editable 去掉确認按鈕(對勾)

bootstrap-table 可編輯下拉框插件editable中source,validate中無法擷取本行資料row

bootstrap-table分頁小結

Bootstrap-table插件先分頁再搜尋

Bootstrap-table分頁+彙總統計

小白模仿bootstrap-table寫的分頁插件

bootstrap-table（五）表格内容過多時顯示一行