bootstrap table Custom AJAX 自定义ajax请求

如果你不想用bootstrap table自带的ajax请求数据，你可以ajax属性自定义你的数据请求函数。那么这个bootstrap table的ajax属性定义的函数和利用jquery ajax请求有什么区别呢？其实bootstrap table的ajax属性的方法也是调用jquery的ajax,其实他们的区别是纯粹jquery ajax方法请求的数据分页需要自己首先，而ajax属性不需要，非常拗口，我们来看一下两个例子来说明。

jquery ajax方法，需要你自己实现分页（服务器端和CSS分页效果都要自己实现）

   //设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号'
        }, {
            field: 'ProductName',
            title: '产品名称'
        }, {
            field: 'StockNum',
            title: 'Item 库存'
        }];

        $.ajax({
            type: "get",
            url: "/package/bootstrap-table-1.14.1/data.json",
            data: {},
            dataType: "json",
            success: function (res) {

                //bootstrap table初始化数据
                $('#table').bootstrapTable({
                    columns: columns,
                    data: res.rows
                });

            }
        });

在线试一试

bootstrap table 属性ajax自定义函数，服务器端分页需要自己实现，但是CSS样式有bootstrap table 自带

   //自定义ajax函数实现
        var columns = [{
            field: 'Id',
            title: '编号'
        }, {
            field: 'ProductName',
            title: '产品名称'
        }, {
            field: 'StockNum',
            title: 'Item 库存'
        }];


        //bootstrap table初始化数据
        $('#table').bootstrapTable({
            columns: columns,
            ajax: ajaxRequest
        });


        function ajaxRequest(params) {
            var url = '/package/bootstrap-table-1.14.1/data.json'
            $.get(url + '?' + $.param(params.data)).then(function (res) {
                params.success(res)
            })
        }

在线试一试