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

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 是 参数。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?