bootstrap table通过ajax获取后台数据展示在table

1. 背景

bootstrap table 默认向后台发送语法的dataType为 json，但是为了解决跨域问题我们需要将dataType改为jsonp，这时就需要修改bootstrap table获取后台数据的方式，采用$('#table').bootstrapTable('load', data);方法。修改前和修改后代码分别如下所示。

2.修改前代码

 

<div>
    <table id="table"
        data-toggle="table"
        data-url="http://guessulike.config.58v5.cn/gulrecomserviceweb/gulrecall/getscene"
        data-pagination="true"
        data-search="true"
        data-show-columns="true"
        data-show-refresh="true"
        data-show-toggle="true"
        data-page-number="1"
        data-page-size="15"
        data-sort-name="create_time"
        data-sort-order="desc"
        data-page-list="[10, 25, 50, 100, All]"
        data-click-to-select="true"
        data-single-select="true"
        data-toolbar="#toolbar">
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true">th>
                <th data-field="scene_name" data-switchable="true">推荐位名称th>
                <th data-field="scene" data-switchable="true">场景th>
                <th data-field="creater" data-switchable="true">创建者th>
                <th data-field="create_time" data-sortable="true" data-switchable="true">创建时间th>
                <th data-field="managers" data-switchable="true">授权账号th>
            tr>
        thead>
    table>
div>

3. 修改后代码

 

 

 
       
       <div>   
           <table id="table">   
           table>   
       div>   
       $(function(){   
           $('#table').bootstrapTable({   
           ajax : function (request) {   
               $.ajax({   
                   type : "GET",   
                   url : "http://guessulike.config.58corp.com/gulrecomserviceweb/gulrecall/getscene",   
                   contentType: "application/json;charset=utf-8",   
                   dataType:"jsonp",   
                   data:'',   
                   jsonp:'callback',   
                   success : function (msg) {             
                       request.success({   
                           row : msg   
                       });   
                       $('#table').bootstrapTable('load', msg);   
                   },   
                   error:function(){   
                       alert("错误");   
                   }   
               });   
           },   
                  
               toolbar:'#toolbar',   
               singleSelect:true,   
               clickToSelect:true,    
               sortName: "create_time",   
               sortOrder: "desc",   
               pageSize: 15,   
               pageNumber: 1,   
               pageList: "[10, 25, 50, 100, All]",   
               showToggle: true,   
               showRefresh: true,   
               showColumns: true,   
               search: true,   
               pagination: true,   
               columns: [{   
                   field: "state",   
                   checkbox:true,   
               },{   
                   field: 'scene_name',   
                   title: '推荐位名称',   
                   switchable: true   
               }, {   
                   field: 'scene',   
                   title: '场景',   
                   switchable: true   
               }, {   
                   field: 'creater',   
                   title: '创建者',   
                   switchable: true   
               }, {   
                   field: 'create_time',   
                   title: '创建时间',   
                   switchable: true,   
                   sortable: true   
               }, {   
                   field: 'managers',   
                   title: '授权账号',   
                   switchable: true   
               }],   
          
           });   
       }
<div>
    <table id="table">
    table>
div>
$(function(){
    $('#table').bootstrapTable({
    ajax : function (request) {
        $.ajax({
            type : "GET",
            url : "http://guessulike.config.58corp.com/gulrecomserviceweb/gulrecall/getscene",
            contentType: "application/json;charset=utf-8",
            dataType:"jsonp",
            data:'',
            jsonp:'callback',
            success : function (msg) {
                request.success({
                    row : msg
                });
                $('#table').bootstrapTable('load', msg);
            },
            error:function(){
                alert("错误");
            }
        });
    },

        toolbar:'#toolbar',
        singleSelect:true,
        clickToSelect:true,
        sortName: "create_time",
        sortOrder: "desc",
        pageSize: 15,
        pageNumber: 1,
        pageList: "[10, 25, 50, 100, All]",
        showToggle: true,
        showRefresh: true,
        showColumns: true,
        search: true,
        pagination: true,
        columns: [{
            field: "state",
            checkbox:true,
        },{
            field: 'scene_name',
            title: '推荐位名称',
            switchable: true
        }, {
            field: 'scene',
            title: '场景',
            switchable: true
        }, {
            field: 'creater',
            title: '创建者',
            switchable: true
        }, {
            field: 'create_time',
            title: '创建时间',
            switchable: true,
            sortable: true
        }, {
            field: 'managers',
            title: '授权账号',
            switchable: true
        }],

    });
}

转载于:https://www.cnblogs.com/telwanggs/p/8875821.html