bootstrap-table ajax jsonp请求数据

最新推荐文章于 2021-09-16 15:34:15 发布

qq_39383593

最新推荐文章于 2021-09-16 15:34:15 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_39383593/article/details/85337421

本文介绍如何利用bootstrap-table的Ajax功能结合JSONP跨域请求数据，实现表格的动态加载。通过设置表格参数，配置JSONP请求源，解析返回的数据并展示在表格中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


$(function () {
    $('#table').bootstrapTable({
        ajax: function (request) {
            $.ajax({
                type: 'GET',
                url: 'http://192.168.253.1:8082/xhdisServer/XHGAServer.ashx?op=1&radius=500&userName=zhb',
                contentType: "application/json;charset=utf-8",
                dataType: "jsonp",
                data: '',
                jsonp: 'callback',
                success: function (msg) {
                    var dataList = [];

                    $.each(msg.Data.polices, function (index, item) {
                        // alert(JSON.stringify(item));
                        JSON.stringify(item)
                        dataList.push({
                            "id": item.id,
                            "company": item.company,
                            "police": item.police,
                            "src": "<img class='firstP' src='../../assets/images/dingwei-n.png' alt=''><img class='secondP' src='../../assets/images/xiangxi-n.png' alt=''><img class='thirdP' src='../../assets/images/lishiguiji-d.png' alt=''>"
                        });

                    });

                    request.success({
                        row: msg
                    });
                    $('#table').bootstrapTable('load', dataList);
                },
                error: function () {
                    alert("错误");
                }
            });
        },
        columns: [{
            field: 'id',
            title: '编号'
        }, {
            field: 'company',
            title: '部门'
        }, {
            field: 'police',
            title: '警员'
        }, {
            field: "src",
            title: "操作"
        }],
        onPostBody: function () {

            $(".secondP").each(function (index, item) {
                $(this).attr({
                    "data-trigger": "hover",
                    "title": "详细信息",
                    "data-html": "true",
                    "data-toggle": "popover",
                    "data-content": "<p></p><p></p>p></p>",
                    "data-placement": "left"
                })
            })
            $(".secondP").popover()
            $(".thirdP").each(function (index, item) {
                $(this).attr({
                    "title": "历史轨迹",
                    "data-toggle": "popover",
                    "data-html": "true",
                    "data-content": "<div><span>起始时间</span><input type='text'/><button>查询</button></div><div><span>结束时间</span><input type='text'/><button>查询</button></div>",
                    "data-placement": "left"
                })
            })
            $(".thirdP").popover()
        }

    })


});