分頁下拉框顯示資料 -- jquery + bootstarp
阿新 • • 發佈：2018-12-03
所以依賴的檔案
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> <link rel="stylesheet" href="css/selectpage.css" type="text/css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script type="text/javascript" src="js/selectpage.js"></script> <script type="text/javascript" src="js/b.selectpage.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> <link rel="stylesheet" href="css/selectpage.css" type="text/css"> <!--<link rel="stylesheet" href="css/demo.css"/>--> </head> <body> <div class="container" style="margin-top: 50px;"> <div class="row-fluid" style="height: 500px; width: 300px;"> <input type="text" id="selectPage" class="input-block-level" placeholder="請輸入查詢關鍵字"> </div> </div> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script type="text/javascript" src="js/selectpage.js"></script> <script type="text/javascript" src="js/b.selectpage.js"></script> <!--<script type="text/javascript" src="js/demo.js"></script>--> <script> var tag_data = [ {id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛'}, {id: 2, name: 'Cleveland Cavaliers', desc: '克里夫蘭騎士'}, {id: 3, name: 'Detroit Pistons', desc: '底特律活塞'}, {id: 4, name: 'Indiana Pacers', desc: '印第安納步行者'} ]; $('#selectPage').bSelectPage({ showField: 'desc', keyField: 'id', data: tag_data, pageSize :1 }); </script> </body> </html>