使用 JavaScript 数组填充 JQuery DataTable

Question

我有我认为的对象数组，比如这个console.log显示

Array(39) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
0: Object { Name: "Jason", Grade: 12 }

我应该使用什么代码来格式化它，以便 jQuery 数据表让我将它设置为源？

https://datatables.net/

我试图这样做，但它给了我一个错误：

    $.myjQuery = function(testData) {
      $('#example').DataTable({
        data: testData,
        columns: [
          { title: 'Name' },
          { title: 'Grade' },
        ],
      });

Answer 1

看文档

和论坛

你需要

columns: [
  { data: 'Name' },
  { data: 'Grade' },
]

使用您的数据

 const dataSet = [ { Name: "Jason", Grade: 12 }, { Name: "Mike", Grade: 11 }, { Name: "Freddie", Grade: 10 }] $(function () { $('#example').DataTable({ data: dataSet, columns: [ { data: 'Name' }, { data: 'Grade' }, ], }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> <link src="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" /> <table id="example" class="display" width="100%"></table>

或转换为嵌套数组时的 THIS

 const yourArray = [ { Name: "Jason", Grade: 12 }, { Name: "Mike", Grade: 11 }, { Name: "Freddie", Grade: 10 }] const dataSet = yourArray.map(({Name,Grade}) => [Name,Grade]) $(function () { $('#example').DataTable({ data: dataSet, columns: [ { title: 'Name' }, { title: 'Grade' }, ], }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> <link src="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" /> <table id="example" class="display" width="100%"></table>