Question

我在表格中添加了一些行，但是现在这一行将是顶部而不是表格的底部。

我尝试使用find("tr:last")但仍然破损，有人可以帮忙吗？谢谢。

http://plnkr.co/edit/YaYihiOAS0C0wsyzUeat?p=preview

的CSS：

  div.addRow {
      line-height: 45px;
      background-color: #fff;
      padding-left: 10px;
      border-bottom: 1px solid;
      border-top: 1px solid #e5e5e5;
    }

HTML：

 <table id="example" class="display" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>order</th>
        <th>name</th>
        <th>country</th>
        <th>action</th>
      </tr>
    </thead>
  </table>


  <table id="newRow" style="display:none">
    <tbody>
      <tr>
        <td>
          <select id="selectbasic" name="selectbasic" class="form-control">
            <option value="1">option 1</option>
            <option value="2">option 2</option>
            <option value="2">option 3</option>
          </select>
        </td>
        <td>DVap
        </td>
        <td>
          www</td>
        <td><i class="fa fa-pencil-square" aria-hidden="true"></i>
          <i class="fa fa-minus-square" aria-hidden="true"></i> </td>
      </tr>
    </tbody>
  </table>

jquery的：

 $(document).ready(function() {

      var table;

      $("#example").on("mousedown", "td .fa.fa-minus-square", function(e) {
        table.row($(this).closest("tr")).remove().draw();
      })

      $("#example").on('mousedown.edit', "i.fa.fa-pencil-square", function(e) {

        $(this).removeClass().addClass("fa fa-envelope-o");
        var $row = $(this).closest("tr").off("mousedown");
        var $tds = $row.find("td").not(':first').not(':last');

        $.each($tds, function(i, el) {
          var txt = $(this).text();
          $(this).html("").append("<input type='text' value=\"" + txt + "\">");
        });

      });

      $("#example").on('mousedown', "input", function(e) {
        e.stopPropagation();
      });

      $("#example").on('mousedown.save', "i.fa.fa-envelope-o", function(e) {

        $(this).removeClass().addClass("fa fa-pencil-square");
        var $row = $(this).closest("tr");
        var $tds = $row.find("td").not(':first').not(':last');

        $.each($tds, function(i, el) {
          var txt = $(this).find("input").val()
          $(this).html(txt);
        });
      });


      $("#example").on('mousedown', "#selectbasic", function(e) {
        e.stopPropagation();
      });


      var url = 'http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
      table = $('#example').DataTable({
        ajax: url,
        rowReorder: {
          dataSrc: 'place',
          selector: 'tr'
        },
        columns: [{
          data: 'place'
        }, {
          data: 'name'
        }, {
          data: 'order'
        }, {
          data: 'delete'
        }]
      });

      $('#example').css('border-bottom', 'none');
      $('<div class="addRow"><button id="addRow">Add New Row</button></div>').insertAfter('#example');

      // add row
      $('#addRow').click(function() {
        //t.row.add( [1,2,3] ).draw();
        var rowHtml = $("#newRow").find("tr")[0].outerHTML
        console.log(rowHtml);
        table.row.add($(rowHtml)).draw();
      });
    });

Answer 1

根据DataTables documentation，添加行的位置由应用于表格的排序和过滤确定。

添加的行受制于应用于表的排序和搜索条件，这将确定表中新行的位置和可见性。

您可以为DataTable分配特定排序：

table = $('#example').DataTable({
    ...,
    order: [[ 0, "desc" ]],
    ...

Here是更改排序的示例。

Answer 2

请改用：

dict

如果将$('#example').DataTable({ bSort: false, ... .. });参数设置为bSort，则新添加的行将放在底部。这是因为在添加行时，它会引用您的表当前所在的排序条件（false或'Asc'）。

如果您想保留排序功能，只需添加选项'Desc'即可将默认排序设置为降序。

order

Answer 3

您可以使用append代替add

$('#example').find( 'tbody' ).append( rowHtml).draw();

http://plnkr.co/edit/KQnOWCDGLI8MzKFfEnAS?p=preview

jquery在表的底部添加一行

3 个答案: