Jquery Datatable拖放行,从json数据重新排序行

时间:2017-02-23 09:22:05

标签: javascript jquery html json datatable

我正在使用:jquery.dataTables.js来自:https://datatables.net

我想做两件事:

  1. 如何让我的行拖放?有任何想法吗?或行重新排序
  2. 现在行不遵循订单号,如:1,2,3,4,5,如何让行跟随数字订单?
  3. 我找到了这个示例:https://jsfiddle.net/gyrocode/0308ctqp/但我无法处理我的代码。

    编辑: jsfiddle回答在这里运行

    见下面的回答

    HTML:

    <div class=" dashboard">
      <div class="col-md-8 no-padding">
        <div class="form-group col-md-4 no-padding">
          <select class="form-control" id="sel1">
            <option value="Filter by">Filter by country </option>
            <option value="All">All</option>
            <option value="China">China</option>
            <option value="EUA">EUA</option>
            <option value="Spain">Spain</option>
          </select>
        </div>
      </div>
    
      <br>
      <br>
      <table id="example" class="display" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th>First name</th>
            <th>Place</th>
             <th>Order</th>
          </tr>
        </thead>
      </table>
    

    jquery的:

    $(document).ready(function() {
      var dt = $('#example').dataTable();
      dt.fnDestroy();
    });
    
    $(document).ready(function() {
      var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
      var table = $('#example').DataTable({
        ajax: url,
        columns: [{
          data: 'name'
        }, {
          data: 'name'
        },{
          data: 'order'
        }]
      });
    
      $('#sel1').change(function() {
        if (this.value === "All") {
          table
            .columns(1)
            .search('')
            .draw();
        } else {
          table
            .columns(1)
            .search(this.value)
            .draw();
        }
      });
    });
    

    这是我的jsfiddle

    感谢

1 个答案:

答案 0 :(得分:2)

对于reordring导入所需的lib:(jquery-ui.js - jquery.dataTables.rowReordering.js)

对于重新排序顺序,默认情况下使用rowReordering时,第一行用于排序表,因此在列数据中将order字段作为第一行,否则我认为(可以使用dataTable.editor.js )

Bellow a a sniipet

$(document).ready(function() {
  var dt = $('#example').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'https://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    createdRow: function(row, data, dataIndex){
      $(row).attr('id', 'row-' + dataIndex);
    },
    rowReorder: {
       dataSrc: 'order',
    },
    columns: [
      {
         data: 'order'
      },{
         data: 'name'
      },{
         data: 'place'
    }]
  });
	table.rowReordering();  
  
  
  $('#sel1').change(function() {
    if (this.value === "All") {
      table
        .columns(1)
        .search('')
        .draw();
    } else {
      table
        .columns(1)
        .search(this.value)
        .draw();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="//mpryvkin.github.io/jquery-datatables-row-reordering/1.2.3/jquery.dataTables.rowReordering.js"></script>

<div class=" dashboard">
  <div class="col-md-8 no-padding">
    <div class="form-group col-md-4 no-padding">
      <select class="form-control" id="sel1">
        <option value="Filter by">Filter by country </option>
        <option value="All">All</option>
        <option value="China">China</option>
        <option value="EUA">EUA</option>
        <option value="Spain">Spain</option>
      </select>
    </div>
  </div>

  <br>
  <br>
  <table id="example" class="display" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>Order</th>
        <th>First name</th>
        <th>Place</th>
      </tr>
    </thead>
  </table>