javascript - 保留上次检索的数据表更改数据源 header

Question

大家好，如果您比较选择格式 的结果，他们可以在检索后更改来源。但我的问题是在 summary 中，detailed 的标题在更改源后仍然保留。我该如何解决？

基本上我有两个 .php 源，我想根据我选择的格式更改数据表的源。我使用“ajax source”但将其更改为“data”以使代码片段示例有效。

如果您发现我编码有误，请通知我，因为我对 javascript 和数据表不太熟悉，谢谢 :)

$(window).load(function() {
  fnRetReport();
});


function fnRetReport() {
  switch ($("#select-list").val()) {
    case 'detailed':
      //source = "seinq.php";
      source = [{
        "SE": "NICOLAS JENNIFER DIANE",
        "n": 2,
        "g": 0,
        "v": 0,
        "l": 0,
        "y": 1,
        "x": 0,
        "o": 0,
        "0": 3
      }, {
        "SE": "KING MA. KATHERINE",
        "n": 1,
        "g": 1,
        "v": 0,
        "l": 0,
        "y": 6,
        "x": 0,
        "o": 1,
        "0": 9
      }, {
        "SE": "FERRER MICHAEL JAY",
        "n": 0,
        "g": 0,
        "v": 0,
        "l": 0,
        "y": 1,
        "x": 0,
        "o": 0,
        "0": 1
      }, {
        "SE": "CASTRO ROWENA ",
        "n": 1,
        "g": 2,
        "v": 0,
        "l": 0,
        "y": 1,
        "x": 0,
        "o": 0,
        "0": 4
      }, {
        "SE": "GONZALES MARY ANN",
        "n": 11,
        "g": 1,
        "v": 0,
        "l": 0,
        "y": 2,
        "x": 0,
        "o": 8,
        "0": 22
      }, {
        "SE": "VILORIA SHERYLL",
        "n": 0,
        "g": 0,
        "v": 0,
        "l": 0,
        "y": 1,
        "x": 0,
        "o": 0,
        "0": 1
      }, {
        "SE": "DELA CRUZ JETRHO PRINCE",
        "n": 4,
        "g": 0,
        "v": 0,
        "l": 0,
        "y": 4,
        "x": 0,
        "o": 0,
        "0": 8
      }, {
        "SE": "BUGAYONG RANDY",
        "n": 3,
        "g": 4,
        "v": 0,
        "l": 0,
        "y": 2,
        "x": 0,
        "o": 12,
        "0": 21
      }, {
        "SE": "MACARAEG DIVINA",
        "n": 8,
        "g": 25,
        "v": 0,
        "l": 0,
        "y": 1,
        "x": 0,
        "o": 5,
        "0": 39
      }, {
        "SE": "ABANCE ISRAEL",
        "n": 0,
        "g": 0,
        "v": 0,
        "l": 0,
        "y": 0,
        "x": 0,
        "o": 11,
        "0": 11
      }, {
        "SE": "RAMIREZ LENAR",
        "n": 3,
        "g": 0,
        "v": 0,
        "l": 0,
        "y": 0,
        "x": 0,
        "o": 0,
        "0": 3
      }];
      seColumns = [{
        data: 'SE',
        title: 'Sales Executive'
      }, {
        data: 'n',
        title: 'For Follow Up'
      }, {
        data: 'g',
        title: 'On Going'
      }, {
        data: 'v',
        title: 'With VSP'
      }, {
        data: 'l',
        title: 'Lost Sale'
      }, {
        data: 'y',
        title: 'Sold'
      }, {
        data: 'x',
        title: 'Taken Over'
      }, {
        data: 'o',
        title: 'Open'
      }, {
        data: '0',
        title: "Grand Total"
      }];
      break;
    default:
      //source = "seinq2.php";
      source = [{
        "SE": "NICOLAS JENNIFER DIANE",
        "n": 2,
        "g": 0,
        "v": 0,
        "y": 1,
        "0": 3
      }, {
        "SE": "KING MA. KATHERINE",
        "n": 1,
        "g": 1,
        "v": 0,
        "o": 1,
        "y": 6,
        "0": 9
      }, {
        "SE": "FERRER MICHAEL JAY",
        "n": 0,
        "g": 0,
        "v": 0,
        "y": 1,
        "0": 1
      }, {
        "SE": "CASTRO ROWENA ",
        "n": 1,
        "g": 2,
        "v": 0,
        "y": 1,
        "0": 4
      }, {
        "SE": "GONZALES MARY ANN",
        "n": 11,
        "g": 1,
        "v": 0,
        "o": 8,
        "y": 2,
        "0": 22
      }, {
        "SE": "VILORIA SHERYLL",
        "n": 0,
        "g": 0,
        "v": 0,
        "y": 1,
        "0": 1
      }, {
        "SE": "DELA CRUZ JETRHO PRINCE",
        "n": 4,
        "g": 0,
        "v": 0,
        "y": 4,
        "0": 8
      }, {
        "SE": "BUGAYONG RANDY",
        "n": 3,
        "g": 4,
        "v": 0,
        "o": 12,
        "y": 2,
        "0": 21
      }, {
        "SE": "MACARAEG DIVINA",
        "n": 8,
        "g": 25,
        "v": 0,
        "o": 5,
        "y": 1,
        "0": 39
      }, {
        "SE": "ABANCE ISRAEL",
        "n": 0,
        "g": 0,
        "v": 0,
        "o": 11,
        "0": 11
      }, {
        "SE": "RAMIREZ LENAR",
        "n": 3,
        "g": 0,
        "v": 0,
        "0": 3
      }];
      seColumns = [{
        data: 'SE',
        title: 'Sales Executive'
      }, {
        data: 'n',
        title: 'For Follow Up'
      }, {
        data: 'g',
        title: 'On Going'
      }, {
        data: 'v',
        title: 'With VSP'
      }, {
        data: '0',
        title: "Grand Total"
      }];
  };

  var table = $('#seinq').empty();
  table = $('#seinq').DataTable({
    "destroy": true,
    "cache": true,
    "paging": false,
    "data": source, // + "?mret=" + mret + "&yret=" + yret,
    "columns": seColumns
  });
};

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
  <link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>

<body>
  <label>Format :</label>
  <select id="select-list">
    <option value="detailed">Detailed</option>
    <option value="summary">Summary</option>
  </select>
  <button onclick="fnRetReport()">Retrieve</button>

  <table id='seinq' class="display">
    <tbody></tbody>
  </table>
</body>

</html>

图像: Detailed Selected , Summary Selected

Answer 1

$('#seinq thead tr').remove();

在前面加上上面一行 var table = $('#seinq').empty();

请编辑您的 html 代码。你的表应该在 body 里面，脚本应该在 head 里面