<div class="modal fade in" id="_modalDialog" tabindex="1" role="dialog" aria-labelledby="modalLabel"
     style="display: block;"> 
<div class="modal-dialog" aria-hidden="true" style="width:1520px;height:600px">
    <div class="modal-content">
        <div class="modal-header">
            <
 
button aria-hidden="true" data-dismiss="modal" class="close"
                type="button">關閉</button>
            <h4 class="modal-title">預算調整預覽</h4>
        </div>
        <div class="col-lg-5">  
            <div class="text-left"><font style="color:red "><
 
h4>調出金額合計:<span id="totalId"></span></h4></font></div>
        </div>
            <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <section class="panel">
 

                                <table class="table table-hover" id="oaTableId"></table>
                            </section>
                        </div>
                    </div>
            </div>
    </div>
</div>
</div> 
<script th:inline="javascript">
    /*<![CDATA[*/
        //設定查詢條件，把分頁，查詢條件，排序等資訊拼接成一個models字串物件傳遞至後臺
    //var batchId=[[${batchId}]];
    $(function(){
        //初始化Table
        $('#oaTableId').bootstrapTable({   
                            url : 'taskAgentsController/getAdjustDetailList.json', //請求後臺的URL（*）
                            method: 'GET', 
                            sidePagination : "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
                            pagination : true, //是否顯示分頁（*）
                            queryParams : queryParams, //分頁
                            pageSize : 10, //每頁顯示的記錄數
                            pageNumber : 1, //當前第幾頁
                            pageList : [ 10, 25, 50, 100 ], //記錄數可選列表
                            //showFooter: true,  方式一列求和
                            responseHandler: function (res) {
                                return res.data;
                            },
　　　　　　　　　　　　　　　　　　//方式二列求和
                             onLoadSuccess: function (res) {  //載入成功時執行
                                 var sum_1 = 0;
                                for (var i=0;i<res.length;i++) {
                                    sum_1 +=parseFloat(res[i].exportMoney);
                                }
                                document.getElementById("totalId").innerText=sum_1+"RMB";
                            },
                            columns : [
                                {title: '調整型別', field: 'adjustType', visible: true, align: 'center', valign: 'middle'},
                                {title: '申請日期', field: 'applyDate', visible: true, align: 'center', valign: 'middle'},
                                {title: 'OA流程編號', field: 'processCode', visible: true, align: 'center', valign: 'middle'},
                                {title: '申請組織', field: 'applyOrganization', visible: true, align: 'center', valign: 'middle'},
                                {title: '申請部門', field: 'applyDepartment', visible: true, align: 'center', valign: 'middle'},
                                {title: '是否涉及人力成本', field: 'flag', visible: true, align: 'center', valign: 'middle'},
                                {title: '調出組織', field: 'exportOrganization', visible: true, align: 'center', valign: 'middle'},
                                {title: '調出部門', field: 'exportDepartment', visible: true, align: 'center', valign: 'middle'},
                                {title: '調出科目', field: 'exportSubject', visible: true, align: 'center', valign: 'middle'},
                                {title: '調出月份', field: 'exportMonth', visible: true, align: 'center', valign: 'middle'},
                                {title: '調出金額', field: 'exportMoney', visible: true, align: 'center', valign: 'middle'
                                     /* footerFormatter: function (value) {    // showFooter: true, 非常重要 
                                         var count = 0;
                                                for (var i in value) { 
                                                    count += parseFloat(value[i].exportMoney);
                                                } 
                                                alert(count)
                                                return count;
                                        } */
                                },
                                {title: '費控餘額', field: 'costControl', visible: true, align: 'center', valign: 'middle'},
                                {title: '調入組織', field: 'importOrganization', visible: true, align: 'center', valign: 'middle'},
                                {title: '調入部門', field: 'importDepartment', visible: true, align: 'center', valign: 'middle'},
                                {title: '調入科目', field: 'importSubject', visible: true, align: 'center', valign: 'middle'},
                                {title: '調入月份', field: 'importMonth', visible: true, align: 'center', valign: 'middle'},
                                {title: '調入金額', field: 'importMoney', visible: true, align: 'center', valign: 'middle'},
                                {title: '調整原因', field: 'adjustReason', visible: true, align: 'center', valign: 'middle'}
                               ]
                        });
                });
    //引數
    function queryParams(params) {
        var batchId=[[${batchId}]];
        var param={"batchId":batchId};
        return param;
    }
    
        
    /*]]>*/
</script>

方式二效果展示: