第一步：jsp頁面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<script src="<%=request.getContextPath() %>/static/pages/js/bgmList.js?v=1.0.0.2" 
	type="text/javascript"></script>

	<!-- BEGIN PAGE HEADER-->
	<!-- BEGIN PAGE BAR -->
	<div class="page-bar">
	    <ul class="page-breadcrumb">
	        <li>
	            <span>首頁</span>
	            <i class="fa fa-circle"></i>
	        </li>
	        <li>
	            <span>bgm管理</span>
	            <i class="fa fa-circle"></i>
	        </li>
	        <li>
	            <span>背景音樂列表展示</span>
	        </li>
	    </ul>
	</div>
	<!-- END PAGE BAR -->
	<!-- END PAGE HEADER-->
                        
	<div class="row">
    	<div class="col-md-12">
                   
			<div class="bgmList_wrapper">
                <table id="bgmList"></table> 
    			<div id="bgmListPager"></div>
             </div>
             
		</div>
	</div>
 

第二步：相關頁面js的書寫

var deleteBgm = function(bgmId) {
	
	var flag = window.confirm("是否確認刪除？？？");
	if (!flag) {
		return;
	}
	
	$.ajax({
		url: $("#hdnContextPath").val() + '/video/delBgm.action?bgmId=' + bgmId,
		type: "POST",
		success: function(data) {
			if (data.status == 200 && data.msg == 'OK') {
				alert('刪除成功~~');
				var jqGrid = $("#bgmList");  
				jqGrid.jqGrid().trigger("reloadGrid");//重新整理前端頁面
			}
		}
	})
}






var BgmList = function() {

	// 構建bgm列表物件
    //第三步在這裡
    var handleBgmList = function() {
    	
    	// 上下文物件路徑
		var hdnContextPath = $("#hdnContextPath").val();
		var bgmServer = $("#bgmServer").val();
		
		
		var jqGrid = $("#bgmList");  
        jqGrid.jqGrid({  
            caption: "所有bgm列表", 
            url: hdnContextPath + "/video/queryBgmList.action",  
            mtype: "post",  
            styleUI: 'Bootstrap',//設定jqgrid的全域性樣式為bootstrap樣式  
            datatype: "json",  
            colNames: ['ID', '歌曲名稱','作者', '儲存路徑', '操作'],  
            colModel: [  
                { name: 'id', index: 'id', width: 30 },  
                { name: 'author', index: 'author', width: 20 },
                { name: 'name', index: 'name', width: 30 },
                { name: 'path', index: 'path', width: 50, 
                	formatter: function(cellvalue, option, rowObject){
                		
                		var src = bgmServer + cellvalue;
                		var html = "<a href='" + src + "' target='_blank'>點我播放</a>"
                		
                		return html;
                	}
                },
                { name: '', index: '', width: 50, 
                	formatter: function(cellvalue, option, rowObject){
                		
                		var html = '<button class="btn btn-outline blue-chambray" id="" onclick=deleteBgm("' + rowObject.id + '") style="padding: 1px 3px 1px 3px;">刪除</button>';
                		
                		return html;
                	}
                }
            ],  
            viewrecords: true,  		// 定義是否要顯示總記錄數
            rowNum: 10,					// 在grid上顯示記錄條數，這個引數是要被傳遞到後臺
            rownumbers: true,  			// 如果為ture則會在表格左邊新增一列，顯示行順序號，從1開始遞增。此列名為'rn'
            autowidth: true,  			// 如果為ture時，則當表格在首次被建立時會根據父元素比例重新調整表格寬度。如果父元素寬度改變，為了使表格寬度能夠自動調整則需要實現函式：setGridWidth
            height: 400,				// 表格高度，可以是數字，畫素值或者百分比
            rownumWidth: 36, 			// 如果rownumbers為true，則可以設定行號 的寬度
            pager: "#bgmListPager",		// 分頁控制元件的id  
            subGrid: false				// 是否啟用子表格
        }).navGrid('#bgmListPager', {
            edit: false,
            add: false,
            del: false,
            search: false
        });
        
        
        // 隨著視窗的變化，設定jqgrid的寬度  
        $(window).bind('resize', function () {  
            var width = $('.bgmList_wrapper').width()*0.99;  
            jqGrid.setGridWidth(width);  
        });  
        
        // 不顯示水平滾動條
        jqGrid.closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
    	
    }
    
    return {
        //第二步在這裡
        init: function() {
        	handleBgmList();
        }

    };

}();

//第一步在這裡
jQuery(document).ready(function() {
	BgmList.init();
});