我正在嘗試將我的ajax回應中的資料顯示到我的jquery資料表中

我正在嘗試做的事情是我試圖向我的 jquery 資料表顯示我的 ajax 回應我的表看起來像這樣

<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 回應，但它沒有顯示任何資料，但我正在從我的郵遞員的這個鏈接中獲取資料。我的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
    },

uj5u.com熱心網友回復：

這是一種使用您的 JSON 的方法。

桌子：

<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" }            
      ]
    } );
  });

我的 URL 回傳您的 JSON。因為您的 JSON 的資料陣列被呼叫doc，所以您需要在dataSrc選項中使用該名稱：

dataSrc: "doc"

無需操作任何 HTML 字串。

您應該能夠接受并添加您可能需要的額外部分 - 例如您的 URL、您對會話存盤的使用等等。

我的示例生成以下內容：

uj5u.com熱心網友回復：

如果你是這個意思：

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

標籤：javascript html jQuery 阿贾克斯 数据表

上一篇：ajax出錯-laravel-crud-此路由不支持GET方法。支持的方法：POST

下一篇：具有不同資料源flask，ajax的多個資料表