jQuery动态DataTables重新加载

1 回答

• 1

  您将需要使用服务器端处理 . 这是我如何做的一个例子 .

  $('.dtable').DataTable({
    /*
     * Shows message dialog of loading data for slow connections
     */
    processing: true,
    /*
     * Does an ajax call to get the data
     * Happens every time you search or sort
     */
    serverSide: true,
    /*
     * full_numbers = first, last, next, previous, and numbers
     * in the pagation
     */
    pagingType: "full_numbers",
    /*l = show X entries
     * f = search box
     * <> = div
     * <"class" = class name
     * t = table
     * r = 'proccessing' dialog
     * i = 10 out of 1000 records
     * p = pagation
     * */
    dom: 'lf<"nstuff"p><"toolbar">trip',
    /*
     * Defines the ajax call
     */
    ajax: {
      url: 'url.php',
      datatype: "json",
      type: "post",
      /*Adds data to ajax call*/
      data: function(d) {
        d.action = 'list';
      }
    },
    /*Defines columns*/
    columns: [
      /* Everything in here is sent to server upon ajax call.
       * Orderable false = no arrows to order by
       * searchable false = doesn't search that column
       * */
      {
        title: "name",
        render: function() {
          /*
           * arguments[2] is the third parameter passed in through the
           * function. it holds the entire row data in it.
           */
          var row = arguments[2];
          return "<a href='?" + row.id + "'>" + row.name + "</a>";
        }
      }, {
        title: "Info",
        "orderable": false,
        render: function() {
          return arguments[2].email;
        }
      }, {
        title: "Action",
        data: 'id',
        "orderable": false
      }
    ],
    /*Orders from this to that*/
    order: [
      [0, 'asc']
    ]
  });
  

  <?php
  function list($REQUEST) {
          /*
           * Draw is returned back to datatables in order for javascript to not render
           * Older draws first in case of async ajax calls.
           */
          $draw = $this->aspam($REQUEST, true, 'draw');
          /* Query Handles the search field in the datatables plugin */
          $query = $this->aspam($this->aspam($REQUEST, false, 'search'), false, 'value');
          /* Data holds the extra variables */
          $data = $this->aspam($REQUEST, false, 'data');
          /* This is the array of order from datatables */
          $order = $this->aspam($REQUEST, false, 'order');
          /* Where to start the limit */
          $start = $this->aspam($REQUEST, true, 'start');
          /* how long the limit is */
          $length = $this->aspam($REQUEST, true, 'length');
          /* Set up all the variables defaults to not throw errors */
          $orderby = '';
          $where = '';
          $first = TRUE;
          /* if order is array itterate through it and set the order */
          if (is_array($order)) {
              foreach ($order as $o) {
                  if ($first) {
                      $first = FALSE;
                  } else {
                      $orderby .= ',';
                  }
                  /* 0 = Name
                   * $o[dir] is either asc or desc based on datatables
                   */
                  switch ($o['column']) {
                      case 0:
                      case '0':
                          $orderby .= "entity_name $o[dir]";
                          break;
                  }
              }
              /* if not empty create the order by */
              if (!empty($orderby)) {
                  $orderby = "ORDER BY $orderby";
              }
          }
          /* if the search string is not empty search all the searchable fields */
          if (!empty($query)) {
              $where .= "
                  AND (
                      name like '%$query%'
                  )";
          }
  
          /* This is the selection query 
           * It creates the sql with out and with the where
           */
  
          $sql_nowhere = ($sql = "
              select from where
          ");
          $sql_somewhere = ($sql .= "
                  $where
          ");
          $sql .= "
                  $orderby
                  LIMIT $start,$length
          ";
          /*
           * after all the where and join clauses are created get the filtered
           * count of all the records
           */
          $recordsFiltered = $this->getCounts($sql_somewhere);
          /* The total amount of records in this call */
          $recordsTotal = $this->getCounts($sql_nowhere);
          if (!$temp = $this->retrieve($sql)) {
              /* if no results are shown create $temp as an empty array to not through errors */
              $temp = [];
          }
          /* creates the datatables array that it likes so it won't through an error */
          $array = array(
              'draw' => $draw
              , 'recordsTotal' => $recordsTotal
              , 'recordsFiltered' => $recordsFiltered
              , 'data' => $temp
          );
          return $array;
      }
  
      /**
       * gets the total count of sql
       * @param type $sql
       * @return type
       */
      function getCounts($sql) {
          return $this->retrieve("SELECT count(*) as count FROM ($sql) as z")[0]['count'];
      }
  

  除此之外，我建议使用按钮上的click事件来触发删除 .

  $('button').click(function() {
    var id = $(this).data('id');
    deleteMe(id).done(function() {
      $('dtable').reload();
    });
  });
  
  function deleteMe(id) {
    /*code for what ever you do with the id.*/
    return $.ajax();
  }
  

  <button data-id="555">
    Me
  </button>
  

  这个脚本不会帮助你摆脱袖口，但它会指向你正确的方向 .

  EDIT

  var tables = [];
  var options = [{
    ajax: 1
  }, {
    ajax: 2
  }, {
    ajax: 3
  }, {
    ajax: 4
  }, ];
  $('dtable').each(function(index) {
    $(this).data('id', index);
    tables.push($(this).DataTables(options[index]));
  });
  $(document).on('click', '.ssDelete', function(e) {
    var index = $(this).closest('dtable').data('id');
    e.preventDefault();
    $.ajax({
      url: someFormAction,
      type: 'POST',
      dataType: 'html',
      success: function(data) {
        tables[index].ajax.reload();
      }
    });
  });
  

  <table class='dtable'></table>
  <table class='dtable'></table>
  <table class='dtable'></table>
  <table class='dtable'></table>
  

  每次执行数据表时，它都会返回数据表句柄 . 您需要使用该句柄才能刷新表 . 我提出了一种方法，一次添加多个表，没有大量的冗余代码 . 只需确保 options.length 和 dtable.length 是相同的 . 否则你将通过并索引越界 .

  回复于 2024-04-27T12:10:20+08:00