如何在按钮单击MVC时将datatable绑定到jqGrid

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.5/css/ui.jqgrid.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/free-jqgrid@4.15.5/js/jquery.jqgrid.min.js"></script>

<button id="btnBindGrid">绑定Grid</button>
<div id="gridContainer"></div>

$(document).ready(function() {
  $("#btnBindGrid").click(function() {
    // 创建jqGrid
    $("#gridContainer").empty().append("<table id='grid'></table><div id='pager'></div>");
    
    // 使用ajax请求获取数据
    $.ajax({
      url: "your_data_url", // 替换为实际的数据请求URL
      dataType: "json",
      success: function(data) {
        // 将数据填充到DataTable中
        var dataTable = new DataTable();
        dataTable.fill(data);
        
        // 将DataTable中的数据绑定到jqGrid中
        $("#grid").jqGrid({
          data: dataTable.getData(),
          colModel: dataTable.getColumns(),
          pager: "#pager",
          rowNum: 10,
          rowList: [10, 20, 30],
          viewrecords: true,
          autowidth: true,
          height: "auto"
        });
      }
    });
  });
});