Jquery dataTable.ajax.url.load加载不到最新的url的数据

最新推荐文章于 2024-04-25 19:01:14 发布

快乐小左

最新推荐文章于 2024-04-25 19:01:14 发布

阅读量6.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/fireofjava/article/details/48813015

Jquery 专栏收录该内容

7 篇文章

订阅专栏

本文详细阐述了在使用JQuery DataTables过程中遇到的一个问题，即使用fnServerData方法导致Ajax加载旧URL而非最新URL的情况。通过分析代码并尝试使用替代方法，最终找到了解决方案。

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

在使用Jquery的DataTable的时候发现一个很奇怪的问题，

先看源代码

        var dataTable = null;
        function showChartListModal(dm, mc, resource){
            var url = "content/tabledata/analysis/teachers?dm="+dm+"&resource="+resource+"&bmdm="+$("#bmdm").val();
            $("#charts").fadeOut();
            $("#dataTableDiv").fadeIn();
            $("#chart-list-modal-label").text(mc);
            if(dataTable == null){
                dataTable = $("#dataTable2").DataTable({
                    "aaSorting": [[1, "asc"]], //默认排序, 第一列是0, asc/desc
                    "aoColumnDefs": [
                        {"aTargets": [0], "bSortable": false}
                    ],
                    "serverSide":true,//开启服务器模式，使用服务器端处理配置datatable。你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值
                    "sAjaxSource": url,
                    "bDestroy": true,
                    "aoColumns":[
                        {"sDefaultContent": "", 'sClass':'text-center'},
                        {"mData": "gh", 'sClass':'text-center'},
                        {"mData": "xm"}, 
                        {"mData": "rxrq", 'sClass':'text-center'},
                        {"mData": "csrq", 'sClass':'text-center'},
                        {"mData": "xb.mc", defaultContent: "", 'sClass':'text-center'},
                        {"mData": "zc.mc", defaultContent: ""},
                        {"mData": "xl.mc", defaultContent: "", 'sClass':'text-center'},
                        {"mData": "xw.mc", defaultContent: "", 'sClass':'text-center'},
                        {"mData": "szgw.mc", defaultContent: ""},
                        {"mData": "mz.mc", defaultContent: "", 'sClass':'text-center'},
                        {"mData": "zzmm.mc", defaultContent: ""},
                        {"mData": "jg.mc", defaultContent: ""},
                        {"mData": "ssdw.zwmc", defaultContent: ""}
                    ],
                    "dom": "<'row'<'col-xs-4'l><'#buttonChanges.col-xs-8'>r><'#dataRows.row'><'row'<'col-xs-12't>><'row'<'col-xs-6'i><'col-xs-6'p>>", 
                    "initComplete": function () {
                        $("#dataTable2").hide();
                        $("#buttonChanges").css("text-align", "right");
                        $("#buttonChanges").append('<button type="button" class="btn btn-default btn-sm" onclick="changeType(1)">缩略图</button> ');
                        $("#buttonChanges").append('<button type="button" class="btn btn-default btn-sm" onclick="changeType(2)">列表</button>');
                    },
                    "fnCreatedRow":function(nRow, aData, iDataIndex){
                        var comp = createDataBox(aData);
                        $("#dataRows").append(comp.box);
                        comp.init(aData);
                    },
                    <strong>"fnServerData" : function(sSource, aoData, fnCallback){</strong>
                        $("#dataRows").empty();
                        $.ajax({
                            dataType : "json",
                            type : "GET",
                            url : sSource,
                            data : aoData,
                            success : fnCallback
                        });
                    },
                    /*<strong>"fnPreDrawCallback" : function(){</strong>
                        $("#dataRows").empty();
                    }*/
                });
            }else{
                <strong>dataTable.ajax.url(url).load();</strong>
            }
        }

第一次dataTable为null，则创建，后面则只是更换url，重新加载数据，可以发现在fnServerData里面取到的总是最开始加载的url，后面更新的url没有取到。

fnServerData 就是替换默认的ajax的加载过程，在ajax执行前加入一些自己的代码，最后把这个函数用fnPreDrawCallback方法替换，fnPreDrawCallback也是在生成表格前执行，也可以达到我的目的，这样就可以把fnServerData去掉，使用默认的ajax过程，这样修改后发现每次都能加载到最新的url，不知道这是不是dataTable的bug，还是我哪里没有配置好。

总结一下：使用了fnServerData，导致ajax.url(url).load()没有加载最新的url的数据，而是一直使用的最开始的那个url.