數據表下拉問題

我正在使用此代碼嘗試實現jQuery-Datatables中所有列的下拉列表like in this example。數據表下拉問題

var table = $('#myTable').DataTable({ 
     dom: 'lfBrtip', 
     buttons: [ 
     { 
      extend: 'copy', 
      footer: true 
     }, 
     { 
      extend: 'csv', 
      footer: true 
     }, 
     { 
      extend: 'excel', 
      footer: true 
     }, 
     { 
      extend: 'pdf', 
      footer: true 
     } 
    ], 
     initComplete: function() { 
     this.api().columns().every(function() { 
      var column = this; 
      var select = $('<select><option value=""></option></select>') 
       .appendTo($(column.header())) 
       .on('change', function() { 
        var val = $.fn.dataTable.util.escapeRegex(
         $(this).val() 
        ); 

        column 
         .search(val ? '^'+val+'$' : '', true, false) 
         .draw(); 
       }); 

      column.data().unique().sort().each(function (d, j) { 
       select.append('<option value="'+d+'">'+d+'</option>') 
      }); 
     }); 
....... 
    }

Imediately有這個問題，因爲美國可以在圖片中看到：

1.單擊下拉式菜單，使列排序，我不希望出現這種情況。

2.按鈕插入導出。

我在做什麼錯，或者我該如何糾正它？也許是一種解決方法？

與按鈕更新：[]試試下面

來源

2016-05-26 Cristian Muscalu

我不確定是否有更好的方法來實現這一點，但以下是我想出的。

你可能想看看buttons.exportData() API參考。我用format選項，以格式化標題列如下：

var buttonExp = { 
    exportOptions: { 
    format: { 
     header: function (data, column, row) { 
     return header[column]; //header is the array I used to store header texts 
     } 
    } 
    } 
};

您可能需要格式化data參數，以獲得標題的文本和剝離HTML，但這個看起來更乾淨。然後，你需要的標題文字的按鈕存儲在數組中這樣

var header = []; 
header.push("Column Header 1"); 
header.push("Column Header 2"); 
header.push("Column Header N");

最後，綁定到一個元素頁面如下

new $.fn.dataTable.Buttons(table, { 
     "buttons": [$.extend(true, {}, buttonExp, { 
     extend: 'excelHtml5' 
    })] 
});  

table.buttons(0,null).containers().appendTo('.container');

這裏是demo頁。

編輯

您提供的演示是相當接近解決出口問題。但是你沒有把按鈕綁定到dom。因此無法看到頁面上的按鈕。

我已經做了小的修改您的按鈕列表通過更換

{ 
    extend: 'excel', 
    footer: true 
},

與

$.extend(true, {}, buttonExp, { 
    extend: 'excelHtml5' 
}),

而且，我已經刪除了下面的代碼，因爲它是不再需要。

new $.fn.dataTable.Buttons(table, { 
    "buttons": [$.extend(true, {}, buttonExp, { 
     extend: 'excelHtml5' 
    })] 
});

這裏是您demo更新的版本。

來源

2016-05-27 12:07:04

我盯着它20分鐘... aaaand我必須說我不知道什麼是線索這是應該做的，或者我可以如何實現它。我是sory，我是新來的datatables和新的JavaScript。 –

你可以在上面的代碼之後添加代碼部分，看看它是否有效。 –

我已經添加了一個演示頁面鏈接到答案。只需點擊頁面末尾的「Excel」按鈕即可。 –

一個

$（選擇）。兒童（ '選項'）追加（......）
。

，而不是

select.append（

來源

2016-05-26 14:02:54

這有一個更奇怪的影響：https://drive.google.com/file/d/0B4nUvzf87W8KM2U2ZFBlQkNKZDA/view –

數據表下拉問題

回答

相關問題