JQuery Ajax动态加载Table数据

最新推荐文章于 2022-11-26 23:18:19 发布

屈文哲

最新推荐文章于 2022-11-26 23:18:19 发布

阅读量9.7k

点赞数

分类专栏：【Web前端】文章标签： jquery ajax table reload

本文链接：https://blog.csdn.net/quwenzhe/article/details/53585529

版权

【Web前端】专栏收录该内容

23 篇文章 0 订阅

订阅专栏

我们在jsp定义一个select和一个table，要求实现根据select的选值，动态加载table数据。

<select id="type" name="type" onchange="reloadTable(this)"></select>
 <table id="import-table" class="table table-striped table-bordered table-hover" width="100%"></table>

table第一次加载数据的function定义如下：

function loadData() {
    var c = '<label><input type="checkbox" id="checkbox1" class="ace" onchange="javascrpt:selectAll(this);"/><span class="lbl"></span></label>';
    $('#import-table').DataTable({
        ajax: {
            url: '<%=request.getContextPath()%>' + "../../../hot/getByCode.action?code=APP",
            type: "post",
            dataType: "json",
            data: {}
        },
        "scrollCollapse": true,
        ordering: false,
        visible: true,
        api: true,
        serverSide: true,
        columns: [{
            "data": "id",
            "class": "center",
            "width": "80px",
            "name": "importId",
            orderable: false,
            "title": c,
            "render": function(a, b, c, d) {
                return getColumnReturnStr("checkbox", c.id, "importId")
            }
        },
        {
            "data": "name",
            "title": "名称"
        },
        ],
        "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
        initComplete: function() {}
    });
}

接着需要考虑，如何在select选值改变的时候，更新table中ajax的url地址，实现table的reload

function reloadTable(){ 
   var code = $("#type option:selected").val();

  $('#import-table').DataTable()
  .ajax.url(  
        '<%=request.getContextPath()%>'+"../../../hot/getByCode.action?code="+ code
  ).load();

}

这样我们便可以通过改变select选值，动态加载table数据。
通过$(‘#import-table’).DataTable().ajax.url().load();方法实现。