ASP.NET MVC预订仪表盘：日期变更后重载Ajax DataTable

数据老陈

2026-6-17

ASP.NET MVC预订仪表盘日期筛选问题

我在ASP.NET MVC项目中开发一个预订仪表盘，主视图内设置了日期选择器，页面加载时通过脚本将其赋值为当前日期，之后通过Ajax DataTable把当前日期传递到控制器获取数据并展示。表格被放在局部视图中，方便日期变更时重新加载。

目前已有能正常获取数据的脚本，但想要实现日期变更时将选中日期传递到控制器并重新加载表格的功能，尝试相关代码后出现了DataTable未定义、未加载等错误，请求协助完成该功能或提供替代方案。

HTML视图代码

<div class="container-xxl flex-grow-1 container-p-y">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="card mb-4">
        <div class="card-body">
          <div class="date-container">
            <input type="date" id="bookingDate" name="bookingDate" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12"> 
    @{ Html.RenderPartial("_ArrivingSection"); } </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6"> 
    @{ Html.RenderPartial("_InProcessJobsSection"); } </div>
    <div class="col-md-6 col-sm-6 col-xs-6"> 
    @{ Html.RenderPartial("_FutureBookingsSection"); } </div>
  </div>

当前可用的表格脚本

$('#arriving').DataTable({
    processing: true,
    serverSide: true,
    filter: true,
    scrollY: '200px', // 设置表格固定高度
    orderMulti: false,
    ajax: {
       url: '@Url.Action("GetArrivingInformations", "Booking")',
       type: "POST",
       datatype: "json",
    },
    columns: [{
          "data": "CustomerName",
          "name": "Customer Name"
       },
       {
          "data": "ContactNumber",
          "name": "Contact Number"
       },
       {
          "data": "ServiceName",
          "name": "Service"
       },
       {
          "data": "CheckInTime",
          "name": "Check In",
          "render": function (data, type, row) {
             // 假设data是带Hours和Minutes的TimeSpan对象
             if (data) {
                // 将TimeSpan转换为有效的时间格式
                let hours = data.Hours;
                let minutes = data.Minutes;

                // 创建日期对象，设置为当前日期但时间为TimeSpan的时分
                let date = new Date();
                date.setHours(hours, minutes);

                // 格式化为AM/PM时间
                return date.toLocaleTimeString([], {
                   hour: '2-digit',
                   minute: '2-digit',
                   hour12: true
                });
             }
             return 'Invalid Time';
          }
       },
       {
          "data": "EncryID",
          "render": function (data, type, row) {
             // 检查客户是否已到达
             if (row.IsCustomerArrived) {
                // 已到达则不显示'Arrived'按钮
                return `<div class="btn-group bx-pull-right" role="group">
                     <a href="#" class="btn-info btn-sm common-btn" onclick="openAssignJobModal('${data}', '${row.ServiceName}','${row.CustomerName}')">Assign Job</a>&nbsp;&nbsp;

                 </div>`;
             } else {
                // 未到达则显示'Arrived'按钮
                return `<div class="btn-group bx-pull-right" role="group">
                     <a href="#" class="btn-primary btn-sm common-btn" onclick="markAsArrived('${data}', this)">Arrived</a>&nbsp;&nbsp;
                    <a href="#" class="btn-info btn-sm common-btn" onclick="openAssignJobModal('${data}', '${row.ServiceName}')">Assign Job</a>&nbsp;&nbsp;

                 </div>`;
             }
          }
       }
    ],
    language: {
       search: "Search"
    }
 });

我尝试的代码

资源引用

<script src="~/Addons/DataTable/jquery-3.6.1.min.js"></script>
<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

脚本代码

var arrivingTable; // 全局声明，方便日期变更函数访问

$(document).ready(function () {

    // 安全重载表格的函数
    function safeReloadTable() {
        arrivingTable.ajax.reload();
    }

    // 绑定日期变更事件
    $('#bookingDate').on('change', function () {
        console.log('Date changed:', $(this).val());
        safeReloadTable();
    });
    // 设置日期选择器为当前日期
    const today = new Date().toISOString().split('T')[0];
    $('#bookingDate').val(today);

    try {
        arrivingTable = $('#arriving').DataTable({
            processing: true,
            serverSide: true,
            filter: true,
            scrollY: '200px',
            orderMulti: false,
            ajax: {
                url: '@Url.Action("GetArrivingInformations", "Booking")',
                type: "POST",
                datatype: "json",
                data: function (d) {
                    return $.extend({}, d, {
                        "bookingDate": $('#bookingDate').val()
                    });
                }
            },
            columns: [
                // 现有列配置
                {
                    "data": "CustomerName",
                    "name": "Customer Name"
                },
                {
                    "data": "ContactNumber",
                    "name": "Contact Number"
                },
                {
                    "data": "ServiceName",
                    "name": "Service"
                },
                {
                    "data": "CheckInTime",
                    "name": "Check In",
                    "render": function (data, type, row) {
                        if (data) {
                            let hours = data.Hours;
                            let minutes = data.Minutes;
                            let date = new Date();
                            date.setHours(hours, minutes);
                            return date.toLocaleTimeString([], {
                                hour: '2-digit',
                                minute: '2-digit',
                                hour12: true
                            });
                        }
                        return 'Invalid Time';
                    }
                },
                {
                    "data": "EncryID",
                    "render": function (data, type, row) {
                        if (row.IsCustomerArrived) {
                            return `<div class="btn-group bx-pull-right" role="group">
                                <a href="#" class="btn-info btn-sm common-btn" onclick="openAssignJobModal('${data}', '${row.ServiceName}','${row.CustomerName}')">Assign Job</a>
                            </div>`;
                        } else {
                            return `<div class="btn-group bx-pull-right" role="group">
                                <a href="#" class="btn-primary btn-sm common-btn" onclick="markAsArrived('${data}', this)">Arrived</a>
                                <a href="#" class="btn-info btn-sm common-btn" onclick="openAssignJobModal('${data}', '${row.ServiceName}','${row.CustomerName}')">Assign Job</a>
                            </div>`;
                        }
                    }
                }
            ]
        });

    } catch (error) {
        console.error('Error initializing DataTable:', error);
    }
});

解决方案

问题排查与修复要点

资源加载顺序与有效性
确保jQuery先于DataTables加载，若本地jQuery路径无效，直接使用CDN版本避免路径错误：

<!-- 先加载jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 再加载DataTables的CSS和JS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

局部视图加载时机
表格元素#arriving位于局部视图中，需等待局部视图完全渲染后再初始化DataTable。可以将初始化脚本放在局部视图末尾，或使用$(window).on('load', function(){ ... })替代$(document).ready，确保所有内容加载完毕。

避免重复初始化
页面刷新或局部视图重载时，重复初始化会导致报错，可先判断表格是否已初始化：

if ($.fn.DataTable.isDataTable('#arriving')) {
    $('#arriving').DataTable().destroy();
}
arrivingTable = $('#arriving').DataTable({ ... });

控制器参数接收验证
在GetArrivingInformations方法中确保能正确接收bookingDate参数：

[HttpPost]
public ActionResult GetArrivingInformations(string bookingDate, DataTableParamModel param)
{
    DateTime? selectedDate = string.IsNullOrEmpty(bookingDate) ? DateTime.Today : DateTime.Parse(bookingDate);
    // 根据日期查询数据并返回
    // ...
}

安全重载优化
重载表格时增加状态验证，避免未初始化时调用：

function safeReloadTable() {
    if (arrivingTable && $.fn.DataTable.isDataTable('#arriving')) {
        arrivingTable.ajax.reload(null, false); // false表示不重置分页
    }
}

完整修复后的脚本示例

var arrivingTable;

$(window).on('load', function () {
    // 设置当前日期
    const today = new Date().toISOString().split('T')[0];
    $('#bookingDate').val(today);

    // 初始化表格
    initArrivingTable();

    // 日期变更事件
    $('#bookingDate').on('change', function () {
        safeReloadTable();
    });
});

function initArrivingTable() {
    // 销毁已存在的实例
    if ($.fn.DataTable.isDataTable('#arriving')) {
        $('#arriving').DataTable().destroy();
    }

    arrivingTable = $('#arriving').DataTable({
        processing: true,
        serverSide: true,
        filter: true,
        scrollY: '200px',
        orderMulti: false,
        ajax: {
            url: '@Url.Action("GetArrivingInformations", "Booking")',
            type: "POST",
            datatype: "json",
            data: function (d) {
                return $.extend({}, d, {
                    "bookingDate": $('#bookingDate').val()
                });
            }
        },
        columns: [
            { "data": "CustomerName", "name": "Customer Name" },
            { "data": "ContactNumber", "name": "Contact Number" },
            { "data": "ServiceName", "name": "Service" },
            {
                "data": "CheckInTime",
                "name": "Check In",
                "render": function (data, type, row) {
                    if (data) {
                        let hours = data.Hours;
                        let minutes = data.Minutes;
                        let date = new Date();
                        date.setHours(hours, minutes);
                        return date.toLocaleTimeString([], {
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: true
                        });
                    }
                    return 'Invalid Time';
                }
            },
            {
                "data": "EncryID",
                "render": function (data, type, row) {
                    if (row.IsCustomerArrived) {
                        return `<div class="btn-group bx-pull-right" role="group">
                            <a href="#" class="btn-info btn-sm common-btn" onclick="openAssignJobModal('${data}', '${row.ServiceName}','${row.CustomerName}')">Assign Job</a>
                        </div>`;
                    } else {
                        return `<div class="btn-group bx-pull-right" role="group">
                            <a href="#" class="btn-primary btn-sm common-btn" onclick="markAsArrived('${data}', this)">Arrived</a>
                            <a href="#" class="btn-info btn-sm common-btn" onclick="openAssignJobModal('${data}', '${row.ServiceName}','${row.CustomerName}')">Assign Job</a>
                        </div>`;
                    }
                }
            }
        ],
        language: {
            search: "搜索"
        }
    });
}

function safeReloadTable() {
    if (arrivingTable && $.fn.DataTable.isDataTable('#arriving')) {
        arrivingTable.ajax.reload(function(){
            console.log('表格已重新加载');
        }, false);
    }
}

内容的提问来源于stack exchange，提问作者Dev Beginner

ASP.NET MVC预订仪表盘：日期变更后重载Ajax DataTable

HTML视图代码 #

当前可用的表格脚本 #

我尝试的代码 #

资源引用 #

脚本代码 #

解决方案 #

问题排查与修复要点 #

完整修复后的脚本示例 #