Bootstrap Data Table簡單使用（動態加載數據）

時間 2019-11-16

標籤 bootstrap data table 簡單使用動態加載數據欄目 Bootstarp 简体版

原文原文鏈接

直接上代碼：javascript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>table</title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../css/bootstrap-table.css" />
		<script src="../js/jquery-1.12.4.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/bootstrap-table.js"></script>
		<script src="../js/bootstrap-table-zh-CN.js"></script>
	</head>
	<body>
    <table class="table" id="dataShow" >  
        
    </table>
    <script>
        $(function () {  
        	//開始裝載數據
            $("#dataShow").bootstrapTable({  
                url: "http://www.zunyaohui.com/data/?action=product&class=0&type=list&option=a1_b1_c1_d1_e3_&keyword=",  
                sortName: "CompanyShortname",//排序列
                striped: true,//條紋行  
                sidePagination: "server",//服務器分頁  
                showRefresh: true,//刷新功能  
                clickToSelect: false,//選擇行即選擇checkbox  
                singleSelect: true,//僅容許單選  
                pagination: true,//啓用分頁   
                pageCount: 10,//每頁行數  
                pageIndex: 0,//起始頁  
                pageList: [10, 25, 50, 100],//可供選擇的每頁的行數
                escape: true,//過濾危險字符  
                queryParams: getParams,//攜帶參數 
                dataType: "jsonp",
				columns: [
                  {
                    title: '發行機構',
                      field: 'CompanyShortname',
                      align: 'center',
                      valign: 'middle'
                  }, 
                  {
                      title: '產品簡稱',
                      field: 'ProductShortname',
                      align: 'center',
                      valign: 'middle',
                  }, 
                  {
                      title: '預期年收益',
                      field: 'IncomeRate',
                      align: 'center',
					  formatter:function(value,row,index){  					 
                        return value+"0%"; 
                      }
                  },
                  {
                      title: '起始資金',
                      field: 'AmountLow',
                      align: 'center'
                  },
                  {
                      title: '產品期限',
                      field: 'Term',
                      align: 'center',
                  },
				  {
                      title: '付息方式',
                      field: 'ServicingWay',
                      align: 'center',
                  },
				  {
                      title: '投資領域',
                      field: 'InvestmentField',
                      align: 'center',
                  },
                  {
                      title: '預定',
                      field: 'id',
                      align: 'center',
                      formatter:function(value,row,index){  					      
                        return '<a href="#" mce_href="#" onclick="reserve(\''+ row.id + '\')">預定</a> '; 
                      } 
                  }
                ],
                onLoadSuccess: function (ee)  
                {  
                   //查詢數據成功 
                   console.info(ee);
					
                }
            });  
        });  
        //默認加載時攜帶參數  
        function getParams(parm) { 
            return { page: (parm.offset / parm.limit)+ 1, rows:10};  
        }  
		//預定功能 
        function reserve(parm) { 
            alert("進行預定操做！"); 
        }
    </script>
	</body>
</html>