Bootstrap Table 中的ajax属性

最新推荐文章于 2023-11-28 10:35:33 发布

msilaedI

最新推荐文章于 2023-11-28 10:35:33 发布

阅读量2.5k

点赞数

分类专栏： jQuery 文章标签： ajax bootstrap jquery

本文链接：https://blog.csdn.net/AE_yang/article/details/120782931

版权

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在BootstrapTable中结合Ajax实现数据动态加载。官方示例中，只需在构造时给ajax属性指定一个请求函数即可。常见示例中，通过$.ajax进行数据请求，并在success回调中使用result.success。特别注意，提供的ajax函数必须包含result参数，否则load方法将无法正常工作。理解这一细节对于避免使用过程中遇到的问题至关重要。

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

网上有挺多Bootstrap Table结合ajax的例子，但新版Bootstrap Table在构造的时候给ajax属性一个带请求的函数就行了。

一、官方示例

<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

<table
  id="table"
  data-toggle="table"
  data-height="460"
  data-ajax="ajaxRequest"
  data-search="true"
  data-side-pagination="server"
  data-pagination="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  // your custom ajax request here
  function ajaxRequest(params) {
    var url = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data'
    $.get(url + '?' + $.param(params.data)).then(function (res) {
      params.success(res)
    })
  }
</script>

官方示例可以说是相当抽象，与一般的生产逻辑有一定距离

二、常见示例

$('#table').bootstrapTable({
	ajax : function (result) {
        $.ajax({
            url: '../Handler.ashx',
            type : "POST",
			data:{},
			dataType:"json",
            success : function (data) {			
				result.success({
                    row : data
                });
                $('#table').bootstrapTable('load', data);
            },
			error:function(error){
				alert("错误");
			}
        });
	},

    /*其他属性*/
})

这种类型在网上还是挺多见的，构造的时候直接调用，拿起来就能用，结果就踩坑了。