DataTables和粘性行和自定义数据

时间:2016-08-17 15:47:17

标签: javascript jquery json datatables

我正在尝试让我的表始终将特定行显示为第一个孩子,即使在排序或更改页面时也是如此。

我让它使用排序(它使用ID列来修复它)但是当我更改页面时,第一行就消失了。

我尝试使用fnDrawCallBack但无法使其正常工作。

我需要的另一件事是根据选择器使固定行具体化。

它适用于1-2个选项,但我的表有90多个选项可供选择,而为所有这些选项做“ifs”只会是很多代码......有更简单的方法吗? / p>

这是一个小提琴:http://jsfiddle.net/3ee390r4/8/

<div>

<select class="form-control" name="opt_table" id="opt_table">
<option value="0">-</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button onclick="fnClickAddRow()">Add Rows</button>
</div>
<br />
<br />
<table id="table_id" class="display">
<thead>
<tr>
  <th>index1</th>
  <th>index2</th>
  <th>ID</th>
</tr>
</thead>
<tbody></tbody>
</table>
$(document).ready(function() {
$('#table_id').dataTable({
"data": jsdata,

 "fnDrawCallback": function(oSettings) {
    alert('draw complete');
// unlinks the first row from the table - to be placed _before_ the datatables init for #list
  // var row0 = $('#table_id tbody tr:first').detach()[0]

// the datatables drawCallback for #list
//  function drawCallback() {
// re-insert the unlinked row at the top
  //   $('#table_id tbody tr:first').before(row0)
   //  }
   },
'aaSortingFixed': [
  [2, 'asc']
]

});

});


var jsdata = [];

var dataA = ["10", "10", "0"];
var dataB = ["20", "20", "0"];


function fnClickAddRow() {
var jsdata = [];
if ($('#opt_table').val() == "1") {
alert('selected 1');
var jsdata = [
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"],
  ["1", "1", "1"]
];
} else if ($("#opt_table").val() == "2") {
  alert('selected 2')
  var jsdata = [
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"],
  ["2", "2", "2"]
  ];

  } else if ($("#opt_table").val() == "0") {
  alert('Select First')
  return false;
  }

  if (jsdata  && jsdata.length > 0) {
  alert ('data filled');
  var sortId = $("#opt_table").val();
  if (sortId == 1){
  alert('selected ID is 1');
  jsdata.push(dataA);
  }
  }

  $('#table_id').dataTable().fnClearTable();
  $('#table_id').dataTable().fnAddData(jsdata);
  }

0 个答案:

没有答案