Datatables调用ajax.reload()不刷新，日期选择器切换日期后无法重载表格

看起来你遇到的问题是日期切换后，Datatable没带上新日期去请求后台，所以表格数据一直没更新对吧？我帮你梳理下代码里的几个小问题，再给你调整后的解决方案。

问题分析 #

1. 静态参数导致日期不更新
   你在初始化Datatable时，ajax的data是直接取了页面加载时的日期值：

data: { stopCodeDate: $('#stopCodeDate').datepicker({ dateFormat: 'dd-mm-yy' }).val() }

这个值只会在页面首次加载时计算一次，后续调用ajax.reload()时，不会自动更新成新选择的日期，后台拿到的始终是初始日期，自然不会返回新数据。

2. 重复初始化datepicker
   你每次获取日期值时都重新调用$('#stopCodeDate').datepicker({ dateFormat: 'dd-mm-yy' })，这会重复初始化日期选择器插件，不仅没必要，还可能引发一些意想不到的bug。

调整后的代码 #

1. 修正Datatable和datepicker的初始化逻辑

$(document).ready(function() {
    currentTab = "stopCodeList";

    // 初始化datepicker时一次性设置好日期格式，链式调用避免重复选择器
    $("#stopCodeDate").datepicker({
        dateFormat: 'dd-mm-yy', // 把格式配置放在初始化环节
        onSelect: function() {
            changeDate();
        }
    }).datepicker('setDate', new Date());

    $('#StopCodes').DataTable({
        ajax: {
            url: "php/stopCodes.php",
            // 把data改成函数，每次请求都会重新获取最新日期
            data: function() {
                return { 
                    stopCodeDate: $('#stopCodeDate').val() 
                };
            },
            type: "POST",
            dataSrc: ""
        },
        // 这里可以补充你的其他Datatable配置项，比如列定义等
    });
});

2. 简化changeDate函数

function changeDate() {
    if (currentTab == "groupList") {
        $("#Groups").DataTable().ajax.reload();
    } else if (currentTab == "loc31List") {
        $("#vips").DataTable().ajax.reload();
    } else {
        // 直接val()获取日期即可，无需重新初始化datepicker
        alert($('#stopCodeDate').val());
        // 补全你的表格ID，调用reload即可自动携带新日期
        $("#StopCodes").DataTable().ajax.reload();
    }
}

为什么这样改有效？ #

把ajax的data从固定对象改成动态函数后，每次Datatable发起请求（包括首次加载和后续的reload），都会执行这个函数获取最新的日期参数，这样新选择的日期就会被正确传递到后台，后台返回对应日期的数据后，表格自然就会刷新了。同时统一了datepicker的初始化逻辑，避免重复操作导致的问题。

备注：内容来源于stack exchange，提问作者Mark Ainsworth