如何使用 jquery/ajax 刷新 div 中的 table 内容

Question

我需要你的帮助才能在我的 html 中刷新 div id="mytable"，一旦函数被方法调用。目前，一旦使用以下行调用它，我就会加载整个页面。

在我的 java 方法中，我使用以下行调用 java 脚本方法：

RequestContext.getCurrentInstance().execute("autoRefresh()");

html代码：

<script type="text/javascript">
    function autoRefresh() {
        window.location.reload();
    }
</script>

<div id='mytable'>
    <h1 id='My Table'>
        <table></table>
    </h1>
</div>

Answer 1

您可以加载 HTML 部分页面，在您的情况下是 div#mytable.

中的所有内容

setTimeout(function(){
   $( "#mytable" ).load( "your-current-page.html #mytable" );
}, 2000); //refresh every 2 seconds

更多信息阅读此http://api.jquery.com/load/

更新代码（如果您不希望它自动刷新）

<button id="refresh-btn">Refresh Table</button>

<script>
$(document).ready(function() {

   function RefreshTable() {
       $( "#mytable" ).load( "your-current-page.html #mytable" );
   }

   $("#refresh-btn").on("click", RefreshTable);

   // OR CAN THIS WAY
   //
   // $("#refresh-btn").on("click", function() {
   //    $( "#mytable" ).load( "your-current-page.html #mytable" );
   // });


});
</script>

Answer 2

<div class="card-body">
            <div class="table-responsive">
              <table class="display dataTable no-footer" id="notificationTable" role="grid" aria-describedby="basic-1_info">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th> Title</th>
                    <th> Brief</th>
                    <th>Category</th>
                    <th>To</th>
                    <th>By</th>
                    <th>Edit</th>
                    <th>Delete</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    

                  </tr>
                </tbody>
              </table>
            </div>
          </div>

let notificationTable = $('#notificationTable').DataTable({
      "processing": true,
      // 'scrollX': true,
      "serverSide": true,
      "ordering": false,
      dom: 'Bfrtip',
      buttons: [{
        extend: 'copy',
        exportOptions: {
          columns: '0,1,3,4'
        }
      },
      {
        text: 'CSV',
        className: "csvGenerate",
        action: function (e, dt, node, config) {
          getCSVFile();
        }
      },
      {
        text: 'Excel',
        className: "excelMyButtonsToHide",
        action: function (e, dt, node, config) {
          getExcelFile();
        }
      }, {
        extend: 'print',
        exportOptions: {
          columns: '0,1,3,4'
        }
      },
        'colvis'-
      ],
      language: {
        buttons: {
          colvis: '<span class="icon icon-eye" style="font-size: x-small;"/>'
        }
      },
      'columnDefs': [{
        "visible": false,
        "targets": []
      }],
      "ajax": {
        "url": '/system/admin/notifications/allNotifications?fromDate='+ fromStart +'&toDate=' +endDate +'&orderCol=' + ord + '&column=' + col,
        "type": "GET",
        dataFilter: function (data) {
          responseData = jQuery.parseJSON(data);
          notificationData = responseData.data;
          return JSON.stringify(responseData);
        }
      },
      "columns": [{
        "data": "id"
      },
      {
        "data": "offerTitle"
      },
      {
        "data": "offerBrief"
      },
      {
        "data": "offerCategory"
      },
      {
        "data": "offerTo"
      },
      {
        "data": "offerBy"
      },
      {
        sortable: false,
        "render": function (data, type, full) {
          let buttonID = "edit_" + full.id;
          return '<a id=' + buttonID + ' class="icofont icofont-edit edit"></a>';
        }
      },
        {
          sortable: false,
          "render": function (data, type, full) {
            let buttonID = "delete_" + full.id;
            return '<a id=' + buttonID + ' class=" icofont icofont-trash trash"></a>';
          }
        },


      ],
    });
$('#notificationTable').on('click', 'a.trash', function (row) {

      let rowId = row.target.id;

      selectedId = rowId.split('_')[1]

      Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.isConfirmed) {
          axios.delete(`/system/admin/notifications/${selectedId}`).then (function (response){

            $("#addCashback").text("Add").prop('disabled',false)
            if (true){
              //if (response.data.success){
              $("#addNewNotification").modal("hide")
              notificationTable.draw(true)
              notify("Success","Data Saved successfully","success")
            }
            else{
              notify("Error",response.data.errors,"danger")
            }

          })
          Swal.fire(
                  'Deleted!',
                  'Your file has been deleted.',
                  'success'



          ).then(function() {
            notificationTable.draw(true);
          });

        }

      })

    });

Answer 3

使用此代码

$(".table").load(location.href + " .table");

别忘了在 .table 前加上 space 例如：$(".table").load(location.href + "SPACE.table")

如何使用 jquery/ajax 刷新 div 中的 table 内容

How to refresh table contents in div using jquery/ajax

javascript

ajax

xhtml

jquery

更新代码（如果您不希望它自动刷新）