bootstrap-table load 数据出不来

最新推荐文章于 2023-05-22 16:36:31 发布

转载最新推荐文章于 2023-05-22 16:36:31 发布 · 1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/njZOOM/article/details/78854991

bootstrap-table 专栏收录该内容

1 篇文章

订阅专栏

这篇博客主要讨论了在使用Bootstrap-table时遇到的数据加载问题。当尝试使用load函数加载数据失败后，通过设置sidePagination属性为分页模式，成功显示了数据。作者指出，对于分页功能，数据需要包含'total'和'rows'两个字段。同时，博客中还展示了如何根据日期和类型筛选数据，并提供了相应的JavaScript代码示例。

最近使用Bootstrap-table 加载数据

使用load函数出不来，但是在使用了sidePagination 属性后可以加载出来数据

错误原因：是否使用分页对data的数据格式有要求

使用分页的数据格式 {"total":products.length,"rows":products} 加上total和rows

不适应分页 products 不需要total和rows

<script>
  //日期时间格式化20180613
  function dateFormat(time){
    //time = 2018-06-13;
    var splitArr = time.split('-'),
      newStr = splitArr.join('');
    return newStr;
  }
  $(document).ready(function() {
    //启动日期插件
    $('#calendar').datetimepicker({
      language: 'zh-CN',
      weekStart: 1,
      todayBtn: 1,
      autoclose: 1,
      todayHighlight: 1,
      startView: 2,
      minView: 2,
      forceParse: 0
    });
    //日期改变时刷新table;
    $('#calendar').on('changeDate', function(ev){
      $dataTableHot.bootstrapTable('refresh');
    });

    var type=$("#types option:selected").val();
    $("#types").change(function(){
      type = $("#types option:selected").val();
      $dataTableHot.bootstrapTable('refresh');
    })
    var $dataTableHot = $("#dataTable table").bootstrapTable({
      search: false,
      pagination: true,
      pageSize: 15,
      pageList: [5, 10, 15, 20],
      showColumns: true,
      showRefresh: false,
      locale: "zh-CN",
      striped: true,
      toggle:true,
      ajax:function(request) {
        $.ajax({
          url:"http://127.0.0.1:8080/getdata",
          type:"GET",
          dataType:"json",
          data:{
            date:dateFormat($("#calendar").val()),  //dateFormat($("#calendar").val())
            type:type,
            value:"hot",
            order:"asc"
          },
          success:function(data){
            request.success({
              row : data
            });
            $('#dataTable table').bootstrapTable('load', data);
          },
          error:function(error){
            console.log(error);
          }
        })
      },
      columns:[{
        field: "projectId",
        title:"projectId"
      },{
        field: "projectName",
        title:"projectName"
      }, {
        field: "value",
        title:"value"
      }]
    });

  });

</script>