Datatables 1.10重新加载ajax数据。

I'm using datatables 1.10 trying to change the AJAX source to reload new data from the server, however it keeps using the same URL does now change to the new url. Do I need to change the sSource too somehow I'm uncertain of what the issue is.

我正在使用datatables 1.10尝试更改AJAX源，以从服务器重新加载新数据，但是它一直使用相同的URL，现在已经更改为新的URL。我需要改变源文件吗我不确定问题是什么。

 var oTable = $('#big_table').DataTable({
      'bProcessing'    : true,
      'bServerSide'    : true,
             "sDom": '<"toolbar"lfr>tip<"F">R',

      'sAjaxSource'    : 'myServer/oldURL',
             "columns": [],
      'sPaginationType': 'full_numbers',
             "aaSorting": [
                [5, "desc"]
            ],
      'bAutoWidth'     : false,
            'iDisplayLength': 15,
             "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
            var rowCount = oTable.rows()[0].length;

            // Update footer
            $( api.column( 6 ).footer() ).html(
                ' ( Cards:'+ rowCount +')'
            );
        },


      'fnServerData'   : function(sSource, aoData, fnCallback)
      {
        $.ajax({
          'dataType': 'json',
          'type'    : 'POST',
          'url'     : sSource,
          'data'    : aoData,
          'success' : fnCallback
        }); 
      }, 
}); 

Reload Data

$("#change").click( function()
{
oTable.ajax.url('myServer/newURL').load();
});

data loaded from myServer/oldURL

从myServer / oldURL加载数据

2 个解决方案

#1

I ran into the very same problem and found an easy solution. Just use a function that returns a global variable rather than a pure variable in your data section:

我遇到了同样的问题，找到了一个简单的解决办法。只需在数据部分中使用返回全局变量而不是纯变量的函数:

<script type="text/javascript">
    var cs = 0;
    var dtconfig = {
        "processing": true,
        "serverSide": true,
        "ordering": false,
        "info": true,
        "ajax": {
            "url": "/JournalData",
            "data": {
                selectedStation: function () { return window.cs; }
            }
        },
        "columns": [
            { "data": "ValueDate" },
            { "data": "StationText" },
            { "data": "DataPointText" },
            { "data": "ValueText" },
        ],
        "aoColumnDefs": [
        {
            "aTargets": [0], //indexes of whatever columns you need to format
            "mRender": function (data, type, full) {
                if (data) {
                    var mDate = moment(data).local();
                    //return (mDate && mDate.isValid()) ? mDate.format("L LT") : "";
                    return (mDate && mDate.isValid()) ? moment(mDate).locale("de").format('DD.MM.YY HH:mm:ss') : "";
                    //return mDate.toLocaleString();
                }
                return "";
            }
        }
        ]
    };

    $(document).ready(function () {
        $('#PaJournal').dataTable(dtconfig);
    });

    function UpdateStationFilter(StationId) {
        cs = StationId;
        var table = $('#PaJournal').DataTable();
        table.ajax.reload();
    }
</script>

Now my DataTable reloads the desired data and does not stick to the initial value.

现在，我的DataTable重新加载所需的数据，而不会坚持初始值。

#2

Thanks,Here is my solution,it is not perfect,must send twice url,thanks to this author: How do I modify ajax url of a query datatable? eg: if you If you initialize datatable like this：

               var datatables_options = {
                                "aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ],
                                "iDisplayLength" : 5,
                                //如下的sdom，1.9的版本会显示不出来，
                                "sDom": 'T<"clear">rt<"float_left"i><"float_right_nexpage"p><"float_right_display"l>',
                                //"sDom" : "<r>t<'float_left'i><'float_right_nexpage'p><'float_right_display'l>>",
                                // 第一列禁止排序,因为这是复选框,不需要排序
                                "bSort" : false,
                                "bProcessing" : false,
                                "bServerSide" : true,
                                "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
                                "bDestroy" : true,
                                "bDeferRender":true,//延迟加载html元素
                                "bJQueryUI" : false,
                                "sScrollX" : "100%",
                                "bStateSave":true,
                                "language" : oLanguageData,
                                // "aaData" : data,
                                "aoColumns" : aoColumnsData,
                                // 复选框点击下一页进行更新状态为未选中
                                "fnDrawCallback" : function() {//关键点：需要先去掉checkbox的父级div的类checker，因为这个会影响选中的显示效果
                                    $("#uniform-check-all").removeClass("checker");
                                    //切换下一页，去掉原来全选的checkbox的状态
                                    $("span").removeClass("checked");
                                    $("span #check-all").attr("checked",false);
                                   //更新表格
                                    $.uniform.update();
                                 },
                                "fnRowCallback" : function(nRow, aData,
                                        iDataIndex) {   

                                },
                                "sAjaxSource" : "wageQuery.action?wageDate="
                                        + date,
                                "fnServerData" : function(sSource, aoData,
                                        fnCallback) {
                                    $.ajax({
                                        "type" : 'post',
                                        "async":false,
                                        "url" : sSource,
                                        "dataType" : "json",
                                        "data" : aoData,
                                        "success" : function(resp) {
                                            fnCallback(resp);
                                        }

                                    });
                                },
                                "fixedColumns":   {
                                     "iLeftColumns" : 4,
                                     "sHeightMatch" : "auto"
                                },

                            };

import: if you want to reload new url（action）,here is the solution： first step： Initialize table variables at the JSP file，like this:

   <script type="text/javascript">

          var wageNowTable;//表格全局变量，不要放在ready函数内，否则就不是全局变量
       </script>

second step: Add the following code to the JS file,like this:

   $("#wages-query")
                .click(
                        function() {
                            var date = document.getElementById("wageDate").value;
                            if (date.length == 0) {
                                alert("请选择月份");
                                return;
                            }


                            var datatables_options = {
                                "aLengthMenu" : [ [ 5, 10, 50, 100,500, -1 ],[ 5, 10, 50, 100,500, "All" ] ],
                                "iDisplayLength" : 5,
                                //如下的sdom，1.9的版本会显示不出来，
                                "sDom": 'T<"clear">rt<"float_left"i><"float_right_nexpage"p><"float_right_display"l>',
                                //"sDom" : "<r>t<'float_left'i><'float_right_nexpage'p><'float_right_display'l>>",
                                // 第一列禁止排序,因为这是复选框,不需要排序
                                "bSort" : false,
                                "bProcessing" : false,
                                "bServerSide" : true,
                                "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
                                "bDestroy" : true,
                                "bDeferRender":true,//延迟加载html元素
                                "bJQueryUI" : false,
                                "sScrollX" : "100%",
                                "bStateSave":true,
                                "language" : oLanguageData,
                                // "aaData" : data,
                                "aoColumns" : aoColumnsData,
                                // 复选框点击下一页进行更新状态为未选中
                                "fnDrawCallback" : function() {//关键点：需要先去掉checkbox的父级div的类checker，因为这个会影响选中的显示效果
                                    $("#uniform-check-all").removeClass("checker");
                                    //切换下一页，去掉原来全选的checkbox的状态
                                    $("span").removeClass("checked");
                                    $("span #check-all").attr("checked",false);
                                   //更新表格
                                    $.uniform.update();
                                 },
                                "fnRowCallback" : function(nRow, aData,
                                        iDataIndex) {
                                    var temp = aData.number;
                                    var temp = aData.name;
                                    $('td:eq(0)', nRow).html(
                                            "<input type='checkbox' name='everyline'  class='checkboxes' value="
                                                    + aData.number
                                                    + "></input>");
                                    //由于固定列的原因,当名字超过一定长度,表格就显示错乱,需要限定3个汉字,用...表示
                                    if (GetLength(aData.name) > 6) {
                                        $('td:eq(2)', nRow).html(
                                                "<a style='cursor:pointer' onclick='toWagePerson(\""
                                                        + date + "\",\""
                                                        + aData.identification
                                                        + "\");'>" + cutstr(aData.name, 6)
                                                        + "</a> ");
                                    }else{
                                        $('td:eq(2)', nRow).html(
                                                "<a style='cursor:pointer' onclick='toWagePerson(\""
                                                        + date + "\",\""
                                                        + aData.identification
                                                        + "\");'>" + aData.name
                                                        + "</a> ");
                                    }



                                },
                                "sAjaxSource" : "wageQuery.action?wageDate="
                                        + date,
                                "fnServerData" : function(sSource, aoData,
                                        fnCallback) {
                                    $.ajax({
                                        "type" : 'post',
                                        "async":false,
                                        "url" : sSource,
                                        "dataType" : "json",
                                        "data" : aoData,
                                        "success" : function(resp) {
                                            fnCallback(resp);
                                        }

                                    });
                                },
                                "fixedColumns":   {
                                     "iLeftColumns" : 4,
                                     "sHeightMatch" : "auto"
                                },

                            };

                            // 设置固定前三列的功能
                            datatables_options["sScrollX"] = "100%";
                            datatables_options["sScrollY"] = "400px";
                            datatables_options["bScrollCollapse"] = true;
                            // datatables_options["sScrollXInner"] = '150%';

                            //判断表格是否已经实例化，没有则实例化，已经实例化，则直接更新，加载对应的url
                            if (typeof(wageNowTable) == "undefined") {
                                wageNowTable = $('#sample_1').dataTable(datatables_options);

                            }else{
                                var oSettings = wageNowTable.fnSettings();
                                oSettings.sAjaxSource = "wageQuery.action?wageDate="
                                    + date;
                                wageNowTable.fnDraw(false);//不会跳转到第一页，保留页面的页码和显示条数
                                wageNowTable.fnDraw(false);//不会跳转到第一页，保留页面的页码和显示条数
                            }


                            //  重要注意点:
                            //  2016年10月31日16:38:51:qiulinhe:固定列的复选框在查询数据之后更新状态
                                //重要一点：监听复选框的状态，重要需要使用on的形式，直接click无法改变状态
                            $('.DTFC_LeftHeadWrapper div').on('click','input' ,function () {
                                            $("#uniform-check-all").removeClass("checker");
                                            //切换下一页，去掉原来全选的checkbox的状态
                                            $("span").removeClass("checked");
                                            //表格绘制完成，监听全选的复选框按钮，将表格所有选中
                                                    //alert("全选的按钮事件");
                                                    var val = $(this).prop("checked");
                                                    $("input[type='checkbox']", ".DTFC_LeftHeadWrapper").attr("checked", val);

                                                    $("#check-all").attr("checked", val);
                                                    if (val) {
                                                        $(".checkboxes").each(function(index){
                                                             $(this).attr("checked", val);
                                                            // alert("设置下面全选");
                                                        });
                                                    } else {//不勾选
                                                       $(".checkboxes").each(function(index){
                                                             $(this).attr("checked", val);
                                                             //alert("取消下面全选");
                                                        });
                                                    }

                           } );     
                });

Determine whether the table has been an instance, there is no instance, has been a direct update, load the new URL：

                            if (typeof(wageNowTable) == "undefined") {
                                wageNowTable = $('#sample_1').dataTable(datatables_options);

                            }else{
                                var oSettings = wageNowTable.fnSettings();
                                oSettings.sAjaxSource = "wageQuery.action?wageDate="
                                    + date;
                                wageNowTable.fnDraw(false);//不会跳转到第一页，保留页面的页码和显示条数
                                wageNowTable.fnDraw(false);//不会跳转到第一页，保留页面的页码和显示条数
                            }