如何用Jquery将后台数据通过表格形式展现在页面上

jsp页面代码：

<table id="materialGrid" class="table table-striped table-bordered table-hover dataTables-example">

table>

js代码：

$(document).ready(function() {
        $('#materialGrid').bootstrapTable({
            type:"GET",
            url:"${ctx}/mcLjmaterial/getMcLjmaterialByPage.do",
            cache:false,
            striped : true,
            pagination : true,
//            toolbar : '#tabletb',
            pageSize: 10,
            pageNumber: 1,
            silentSort:false,
            sortable:true,
            showHeader: true,
            "queryParamsType": "limit",
            sidePagination : 'server',//设置为服务器端分页
            pageList : [ 10, 25, 50, 100, 200 ],
            clickToSelect:true,
            columns : [ {
                field : 'id',
                title : '主键ID',
                align : 'right',
                valign : 'bottom',
                visible : false,
                sortable : true
            }, {
                field : '',
                title : '序号',
                align : 'center',
                valign : 'middle',
                sortable : true,
                formatter:function(value, row, index){
                    return row.index = index+1 ; //返回行号
                }
            },{
                field : 'bname',
                title : '材料名称',
                align : 'center',
                valign : 'middle',
                sortable : true,

            }, {
                field : 'cname',
                title : '型号',
                align : 'center',
                valign : 'middle',
                sortable : true,
            },{
                field : 'sl',
                title : '数量',
                align : 'center',
                valign : 'middle',
                sortable : true,
            }, {
                field : 'company',
                title : '队伍名称',
                align : 'center',
                valign : 'middle',
                sortable : true,
            }, {
                field : 'sybw',
                title : '使用部位',
                align : 'center',
                valign : 'middle',
                sortable : true,
            },{
                field : 'ljtime',
                title : '时间',
                align : 'center',
                valign : 'middle',
                sortable : true,
                formatter : timeformat
            },{
                field : 'fzr',
                title : '负责人',
                align : 'center',
                valign : 'middle',
                sortable : true,
            },{
                title : '操作',
                align : 'center',
                valign : 'middle',
                width:100,
                formatter : dealFormatter
            } ]
        });
    } );

讲解：

materialGrid →页面上的table元素的id  

formatter : timeformat→
日期格式化

url:"${ctx}/mcLjmaterial/getMcLjmaterialByPage.do",→
 后台数据请求路径 简单的分页查询

    field : 'id',→后台传的值字段
    title : '主键ID',→
标题
    align : 'right',
    valign : 'bottom',
    visible : false,→是否显示，fslse隐藏
    sortable : true

日期格式化js方法:

function timeformat(value, row, index) {
    var ns=value;
    return new Date(parseInt(ns)).toLocaleString().replace(/:\d{1,2}$/,' ');
}

效果如下：