如何在 Datatables .net5 web 应用程序中选择单元格并显示与默认显示相同的格式

如何解决如何在 Datatables .net5 web 应用程序中选择单元格并显示与默认显示相同的格式

按照 Scott Allen 的 Pluralsight 课程，我正在 dotnet 5 中构建一个 Web 应用程序。

（这是 Scott https://github.com/OdeToCode/OdeToFood/blob/master/OdeToFood/OdeToFood/Pages/Restaurants/ClientRestaurants.cshtml 提供的相关页面的链接 )

以下是代码片段。我已经用相同版本的 CDN 替换了对 bootstrap、jquery 和 Datatables 的引用

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <Meta charset="utf-8" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    
    <link rel="stylesheet" href="/css/site.css" />

    <script
  src="http://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kps3xIVq36I0"></script>
    
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>


        <script>
            $.ajax("/api/people/",{ method: "get"})
            .then(function (response){
                $("#donations").DataTable({
                    data: response,columns: [
                    { "data": "recId",title: "Id"},{ "data": "personName",title: "Name"},{ "data": "personAddress",title: "Address"},{ "data": "personCity",title: "City"},{ "data": "personProvince",title: "Province"}
                    ],buttons: ['csv','excel']
                });
            });
        

        </script>

</head>
<body>
            
    <h2>Records</h2>

    <table class="table" id="mytable">

    </table>

<body>

API 返回行，填充 DataTable，但我无法选择行或单元格。我希望能够单击一行并导航到记录的详细信息页面。我需要更改哪些内容才能利用额外的交互性和格式？

我的：

数据表示例：

解决方法

这是一个自包含的演示，您可以将其保存为 HTML 文件，然后自己在浏览器中运行：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">
    <table id="example" class="display" style="width:100%"></table>
</div>

<script type="text/javascript">

$(document).ready(function() {

  var table = $('#example').DataTable( {
    ajax: {
      method: "GET",url: "https://jsonplaceholder.typicode.com/posts",dataSrc: ""
    },"columns": [
      { "title": "ID","data": "id" },{ "title": "Title","data": "title" },],"initComplete": function () {
      var api = this.api();
      api.$('tr').click( function () {
        var id = api.row( this ).data().id;
        var newUrl = "https://jsonplaceholder.typicode.com/posts/" + id
        window.open(newUrl); 
      } );
    }
  } );

} );

</script>

</body>
</html>

此演示使用 JSONPlaceholder 提供的测试 JSON 数据。首先，DataTables 使用以下内容将数据加载到 HTML 表格中：

ajax: {
  method: "GET",dataSrc: ""
}

因为从 JSONPlaceholder 返回的 JSON 没有命名数组（它的外部容器只是 [...]），所以我们需要使用 dataSrc: "" 告诉 DataTables。您的数据的结构可能有所不同。

DataTable 对象初始化后，我们创建以下函数：

"initComplete": function () {
  var api = this.api(); // gives us access to the DataTables API from within the table itself
  api.$('tr').click( function () { // register a row-level click event
    var id = api.row( this ).data().id; // see notes below
    var newUrl = "https://jsonplaceholder.typicode.com/posts/" + id
    window.open(newUrl); 
  } );
}

下面一行...

var id = api.row( this ).data().id;

...使用 DataTables API row() 调用来获取点击的行，然后在该行中找到“id”字段的值。这个“id”名称来自我们加载的原始 JSON 数据。

JSONPlaceholder 网站为每个“发布”记录提供了虚拟数据。我们构造的新 URL 会将我们带到该 JSON 记录。

实现最终目标的方法肯定不止一种。

在这种特定情况下，我不需要使用您在评论中提到的 "select" extension。但这也是您可以使用的另一种方法。

我通过更改 DataTables.net CSS 和 JS 文件的 CDN 配置以包含 Select 来解决此问题。

我认为默认情况下格式化是其中的一部分。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/b-1.6.5/b-flash-1.6.5/b-html5-1.6.5/r-2.2.7/sl-1.3.1/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/b-1.6.5/b-flash-1.6.5/b-html5-1.6.5/r-2.2.7/sl-1.3.1/datatables.min.js"></script>

编辑虽然这解决了我最初的格式问题，@andrewjames 解决了外观问题和我与 DataTable 交互的挑战。