Belinda_YZ
2019-11-19 01:01
采纳率: 66.7%
浏览 721

ajax获取数据更新table以后,jquery.datatable的js效果失效了该怎么办呀QAQ?

用了jquery的模板表格,如果table里面放的是静态数据的话,选择展示多少条数据、搜索表格内容的功能都是正常的。
但用ajax从后台获取实际上的数据,append到tbody里面这样的形式后,就发现上面这些功能都失效了。

菜鸡学艺不精,网上的方法都试过了,都不行。
感觉好像是同步异步的问题,但不知道该怎么解决,求大佬指路QAQ。

这个是html:

<div class="table-responsive">
    <table id="dataTable1" width="100%" class="table table-striped table-lightfont" style="font-size: 15pt">
        <thead >

        <!-- 第二版结果展示 -->
            <tr>
                <!-- <th>ID</th> -->
                <th>站名</th>
                <th>设备名称</th>
                <th>电压等级</th>                               
                <th>采样时间</th>                               
                <th>相位</th>
                <th>最大过电压(kV)</th>
            </tr>   
            <!-- ID,站名,设备名称,电压等级,采样时间,相位,最大电压值 -->
        </thead>
        <tfoot>

            <!-- 第二版结果展示 -->
            <tr>
                <!-- <th>ID</th> -->
                <th>站名</th>
                </th>设备名称</th>
                <th>电压等级</th>                               
                <th>采样时间</th>                               
                <th>相位</th>
                <th>最大过电压(kV)</th>
            </tr>   
        </tfoot>
        <tbody  id="searchBody">

        </tbody>
        </table>
</div>

这个是js:

function search() {
    //alert($("#station").val())

    var station = $("#station").val()
    var start_time = $("#start_time").val()
    //alert(start_time.toUpperCase)
    var end_time = $("#end_time").val()
    var start_hour = $("#start_hour").val()
    alert(start_time.toUpperCase)
    var end_hour = $("#end_hour").val()
    var level = $("#selectLevel").val()

    var flag = false;    //标识,表示页面上数据还未处理完成
    $.ajax({
        type : "get",
        url : "observe/search",
        data : $("#searchForm").serialize(),
        success : function(data) {
            /*table = $('#dataTable1').DataTable( {
                    retrieve: true,
                    destroy:true,
                    paging: false
            } );*/

            //alert("sucess!")
            //var length=getJsonLength(data);
            console.log(data)
            var arrData = eval(data);

            //alert(data[0].sampdate)
            var searchBody = $("#searchBody");
            $("#searchBody").html("");
            //var dataTable1 = $("dataTable1");
            //$("#dataTable1").html("");

            //var bodyInfo="";
            //var tableInfo="";

            if (data) {
                for (var i = 0; i < arrData.length; i++) {
                    //ID,站名,设备名称,电压等级,采样时间,相位,最大电压值 
                    var row = “【不重要,略过】";
                    searchBody.append(row);
                    //bodyInfo+=row;
                }
                flag=true;

            }

            else {
                alert("数据库故障或无数据!");
            }
        }
    });

    var loadFile;
    loadFile = setInterval(function() {//定时检测    
        if(flag) {//如果数据已经处理完毕
            //loadAlljscssFile();
            loadjscssfile('static/js/jquery-3.2.1.min.js', "js"); //加载你的js文件
                loadjscssfile('static/bootstrap-3.3.7/css/bootstrap.min.css', "css"); //加载你的css文件
                loadjscssfile('static/bootstrap-3.3.7/js/bootstrap.min.js', "js"); //加载你的js文件
                loadjscssfile('bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css', "css"); //加载你的js文件
                loadjscssfile('bower_components/datatables.net/js/jquery.dataTables.min.js', "js"); //加载你的js文件

                clearTimeout();//取消定时检测节省开销
                }
        },50);

}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 毕小宝 2019-11-19 09:30
    已采纳

    首先,DataTables.js 插件本身是可以接收 ajax 请求的:

    return $("#"+tableId).DataTable({
            "dom": 'lrtip',
            "searching": false,
            "processing": true,
            "serverSide":true,
            "sAjaxSource": ajaxRequestUrl,
            "columns":columns,
            "ordering":false,
            "bDestroy":true,
            "language": {
                "sProcessing":"加载中...",
                "lengthMenu": "每页显示 _MENU_ 项记录",
                "zeroRecords": "没有找到记录",
                "info": "第 _START_ 到 _END_ 项记录 (共 _TOTAL_ 项记录)",
                "infoEmpty": "没有记录",
                "sInfoFiltered": "(全部记录数 _MAX_ 条)",
                "paginate": {
                    "first":      "第一页",
                    "last":       "最末页",
                    "next":       "下一页",
                    "previous":   "上一页"
                }
            }
        });
    

    用这种方式直接对列表通过 ajax 请求数据初始化即可。
    其次,如果需要执行页面刷新请求,或者按钮搜索,可以再调用一次该方法,重新渲染列表。ajaxRequestUrl 和 columns 是 参数。

    点赞 打赏 评论

相关推荐 更多相似问题