我正在尝试显示我的 ajax 对我的 jquery 数据 table 的响应的数据

Question

我正在尝试做的是我试图显示我对 jquery 数据的 ajax 响应 table 我的 table 看起来像这样

<div style="margin: 20px;">

                                            <table id="example" class="display" style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>Spouse</th>
                                                        <th>CNIC</th>
                                                        <th>Father</th>
                                                        <th>Mother.</th>
                                                        <th>Employee ID</th>
                                                        <th>Children</th>
                                                        <th>Age</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                                </div>

及以下是我的 ajax 回复，我试图在我的 table 中显示，但它没有显示任何数据，但我正在我的邮递员中从这个 link 获取数据。我的ajax电话写在下面

    <script type="text/javascript">
                
    $(document).ready(function(){

    var table = $('#example').DataTable( {
      ajax: {
        url : "https://2057-185-202-239-227.ngrok.io/employee/employeesByCompany/"+sessionStorage.getItem('Companies_id'),
        dataSrc: "doc",
      },
      columns: [
        { data: 'spouse' },
        { data: 'CNIC' },
        { data: 'fatherName' },
        { data: 'motherName' },
        { data: 'employeeID' },
        { data: 'age' },
        { data: 'children[]' }
      ],
    });
  });

    </script>

这是我收到的 Json 回复，我想在

上添加分页

{
"message": "Success",
"doc": [
    {
        "createdDate": "2022-04-03T17:19:02.666Z",
        "enabled": true,
        "_id": "6249d7156a4ef003db97e4bd",
        "fName": "James Bartley",
        "age": 30,
        "CNIC": "3974224221510",
        "spouse": "Hilary",
        "fatherName": "James",
        "motherName": "Brunhilde",
        "employeeImage": "http://dummyimage.com/267x237.png/ff4444/ffffff",
        "employeeID": "IN319122",
        "company": "62498fc7acd7fb091185bb0e",
        "children": [],
        "__v": 0
    },
    {
        "createdDate": "2022-04-03T17:19:02.666Z",
        "enabled": true,
        "_id": "6249d7156a4ef003db97e4c2",
        "fName": "Clerc Billings",
        "age": 52,
        "CNIC": "4618981270977",
        "spouse": "Debra",
        "fatherName": "Clerc",
        "motherName": "Gwendolyn",
        "employeeImage": "http://dummyimage.com/258x287.png/cc0000/ffffff",
        "employeeID": "IN313190",
        "company": "62498fc7acd7fb091185bb0e",
        "children": [],
        "__v": 0
    },

Answer 1

如果你是这个意思：

doc.map(function(item, id) {
  return(
    <tr key={id}>
      <td>{item.fatherName}</td>
      <td>{item.motherName}</td>
      <td>{item.spouse}</td>
    </tr>
  )
}.bind(this))

Answer 2

这是一种使用您的 JSON 的方法。

table:

<div style="margin: 20px;">

    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Spouse</th>
                <th>CNIC</th>
                <th>Father</th>
                <th>Mother.</th>
                <th>Employee ID</th>
                <th>Age</th>
            </tr>
        </thead>
    </table>

</div>

JavaScript:

  $(document).ready(function(){

    var table = $('#example').DataTable( {
      ajax: {
        url : "http://localhost:7001/docdata",
        dataSrc: "doc"
      },
      columns: [
        { data: "spouse" },
        { data: "CNIC" },
        { data: "fatherName" },
        { data: "motherName" },
        { data: "employeeID" },
        { data: "age" }            
      ]
    } );
  });

我的URLreturns你的JSON。因为您的 JSON 的数据数组称为 doc，您需要在 dataSrc 选项中使用该名称：

dataSrc: "doc"

无需操作任何 HTML 个字符串。

您应该能够接受它并添加您可能需要的额外部分 - 例如您的 URL、您对会话存储的使用等等。

我的示例生成以下内容：

我正在尝试显示我的 ajax 对我的 jquery 数据 table 的响应的数据

I am trying to show the data from my ajax response to my jquery data table

html

javascript

ajax

datatable

jquery