Recently, I suddenly wanted to customize the display content of the footer, and put some statistical results into the footer for display. I found a way on the Internet, tried his idea, and it succeeded. Thank you God.
bootstrap-table.min.js is always a js file, which can be modified appropriately.
Record the method roughly.
Before you start, let me talk about it. If you import the bootstrap Chinese package, namely bootstrap-table-zh-CN.js, on your web page, you must comment it out first, otherwise there will be no change in how you modify it.
1. Reverse the process of its realization
Use Google Chrome or 360 browser to peel off the coat step by step, and finally you will find the following: The content
here is displayed after I have modified it. As you can see, I added a time statistic to him.
Here you can see that there is a class attribute called "pagination-detail", and I found a clue. Next, go to bootstrap-table.min.js to find this thing, I won't say how to search.
The following content will be searched. Different versions of bootstrap may be different, similar to each other:
var m = n.onlyInfoPagination ? n.formatDetailPagination(n.totalRows) : n.formatShowingRows(this.pageFrom, this.pageTo, n.totalRows,n.totalNotFiltered);
if (p.push("<div class=\"".concat(this.constants.classes.pull, "-").concat(n.paginationDetailHAlign, " pagination-detail\">\n <span class=\"pagination-info\">\n ").concat(m, "\n </span>")), !n.onlyInfoPagination) {
……
｝
Analyzing the code around here, you will find that there is a function called formatShowingRows that is very important.
Then search for this function, you can find the structure of this function. as follows:
formatShowingRows: function(e, t, o,n) {
return void 0 !== n && 0 < n && n > o ? "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows (filtered from ").concat(n, " total rows)"): "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows")
},
That's right, it's here, I found it. Just need to change this part of the content.
By analyzing the above two parts of the code, we can find that we can draw a gourd according to the sample, take the existing n.totalRows parameter as a sample, and add the parameters we need.
By searching for totalRows, after analyzing the process, you can roughly know that he is effective in this way.
2. The implementation process is being pushed
1. The first is to define this variable:
paginationLoop: !0,
sidePagination: "client",
totalRows: 0, //看这
totalTimes: 0,
totalNotFiltered: 0,
2. Then define a variable that receives the value passed from the background:
totalField: "total", //看这
totalNotFilteredField: "totalNotFiltered",
dataField: "rows",
3. Then assign the variable that receives the value to the variable used for display:
{
key: "load",
value: function(e) {
var t = !1,
o = e;
this.options.pagination && "server" === this.options.sidePagination && (this.options.totalRows = o[this.options.totalField]), //看这里
this.options.pagination && "server" === this.options.sidePagination && (this.options.totalNotFiltered = o[this.options.totalNotFilteredField]),
t = o.fixedScroll,
o = Array.isArray(o) ? o: o[this.options.dataField],
this.initData(o),
this.initSearch(),
this.initPagination(),
this.initBody(t)
}
},
4. At this time, totalRows has obtained the relevant data sent back from the background, the next step is to display, and the display is through the function mentioned before:
var m = n.onlyInfoPagination ? n.formatDetailPagination(n.totalRows) : n.formatShowingRows(this.pageFrom, this.pageTo, n.totalRows,n.totalTimes, n.totalNotFiltered);
The following is the specific implementation of this function. In the implementation, this o is n.totalRows.
formatShowingRows: function(e, t, o,n) {
return void 0 !== n && 0 < n && n > o ? "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows (filtered from ").concat(n, " total rows)"): "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows")
},
Ok now
Three, add the parameters we need
According to the content of the second part, we will add the parameters I need:
1. Add parameters for receiving background values
I won’t talk about how to transfer the value from the backend. This is the content of the controller. It's exactly the same as passing rows and total
totalField: "total",
totalNotFilteredField: "totalNotFiltered",
dataField: "rows",
totalTimesld: "mTimes", //这就是我添加的内容
2. Add parameters for display
paginationLoop: !0,
sidePagination: "client",
totalRows: 0,
totalTimes: 0, //这个就是用来显示的参数，初始值是０
3. Assign the passed value to the displayed parameter
{
key: "load",
value: function(e) {
var t = !1,
o = e;
this.options.pagination && "server" === this.options.sidePagination && (this.options.totalRows = o[this.options.totalField]),
this.options.pagination && "server" === this.options.sidePagination && (this.options.totalNotFiltered = o[this.options.totalNotFilteredField]),
this.options.totalTimes=o[this.options.totalTimesld], //看这里
t = o.fixedScroll,
o = Array.isArray(o) ? o: o[this.options.dataField],
this.initData(o),
this.initSearch(),
this.initPagination(),
this.initBody(t)
}
},
4. Modify the formatShowingRows function and add the functions you need
I also made a judgment by the way, non-empty display. m is the place I set aside for totalTimes.
formatShowingRows: function(e, t, o,m, n) {
if(null!=m){
return void 0 !== n && 0 < n && n > o ? "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows (filtered from ").concat(n, " total rows) and ").concat(m, " hours"): "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows and ").concat(m, " hours")
}else{
return void 0 !== n && 0 < n && n > o ? "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows (filtered from ").concat(n, " total rows)"): "Showing ".concat(e, " to ").concat(t, " of ").concat(o, " rows")
}
},
5. Use the formatShowingRows function.
Without intercepting the context, analyze it yourself.
var m = n.onlyInfoPagination ? n.formatDetailPagination(n.totalRows) : n.formatShowingRows(this.pageFrom, this.pageTo, n.totalRows,n.totalTimes, n.totalNotFiltered);
4. Processing Chinese display, modify bootstrap-table-zh-CN.js
After the above modification is completed, it will be displayed in English. If the Chinese package is imported at this time, the following content will be gone. Therefore, the content of the Chinese package needs to be modified. Modify bootstrap-table-zh-CN.js.
In the Chinese package, there is also a function called formatShowingRows, which only needs to be modified. Search for formatShowingRows. Too lazy to explain, just go to the code.
formatShowingRows: function formatShowingRows(pageFrom, pageTo, totalRows,totalTimes, totalNotFiltered) {
if (totalNotFiltered !== undefined && totalNotFiltered > 0 && totalNotFiltered > totalRows) {
if(totalTimes!=null){
return "\u663E\u793A\u7B2C ".concat(pageFrom, " \u5230\u7B2C ").concat(pageTo, " \u6761\u8BB0\u5F55\uFF0C\u603B\u5171 ").concat(totalRows, " \u6761\u8BB0\u5F55\uFF08\u4ECE ").concat(totalNotFiltered, " \u603B\u8BB0\u5F55\u4E2D\u8FC7\u6EE4\uFF09，总计 ").concat(totalTimes, " 小时");
}else{
return "\u663E\u793A\u7B2C ".concat(pageFrom, " \u5230\u7B2C ").concat(pageTo, " \u6761\u8BB0\u5F55\uFF0C\u603B\u5171 ").concat(totalRows, " \u6761\u8BB0\u5F55\uFF08\u4ECE ").concat(totalNotFiltered, " \u603B\u8BB0\u5F55\u4E2D\u8FC7\u6EE4\uFF09");
}
}
if(totalTimes!=null){
return "\u663E\u793A\u7B2C ".concat(pageFrom, " \u5230\u7B2C ").concat(pageTo, " \u6761\u8BB0\u5F55\uFF0C\u603B\u5171 ").concat(totalRows, " \u6761\u8BB0\u5F55,总计 ").concat(totalTimes, " 小时");
}else{
return "\u663E\u793A\u7B2C ".concat(pageFrom, " \u5230\u7B2C ").concat(pageTo, " \u6761\u8BB0\u5F55\uFF0C\u603B\u5171 ").concat(totalRows, " \u6761\u8BB0\u5F55");
}
},
the end.
Finally, thank you for quoting the article and post it here.
BootstrapTable custom footer-footer