使用keyTable擴展在DataTable中突出顯示所選行

我有一張表，我希望用戶使用向上/向下箭頭鍵進行導航，該部分是使用Datables的keyTable擴展完成的。使用keyTable擴展在DataTable中突出顯示所選行

我還想要包含聚焦單元格的表格行被突出顯示。我已經嘗試了這個代碼，它應該將類selected添加到應該反過來突出顯示它的行，但它不。

table 
    .on('key-focus', function (e, datatable, cell) { 
     var row = datatable.row(cell.index().row); 
     $(row.node()).addClass("selected"); 
    });

小提琴在：https://jsfiddle.net/hqxq7dk1/

來源

2016-02-14 gaitat

您需要添加css規則：https：// jsfiddle。net/hqxq7dk1/3/ –

不要爭論，因爲你的建議可行，但我認爲'selected'類是在bootstrap的某個地方定義的。 – gaitat

使用'Select'擴展名可能會更好：https：//datatables.net/extensions/select/ [https://jsfiddle.net/hqxq7dk1/4/] –

自舉表，類不是selected而你可能想active。（雖然我猜任何contextual class都可以工作。）

我使用的是DataTables v1.10.10，我也需要突出顯示所選行。我相信我已經退出了相關代碼：

$('#MY_TABLE tbody').on('click', 'tr', function() { 
      table.$('tr.active').removeClass('active'); 
      $(this).addClass('active'); 
    }

上面設置了一個事件偵聽器上連續點擊。 active類將從任何已激活的行中刪除，並添加到接收到單擊事件的行中。

編輯我忘了考慮你提到你想要使用鍵盤導航而不是鼠標點擊來突出顯示該行。所以我的回答不是100％，但我認爲它會解決你所提出的問題。如果您無法適應您的需求，請告訴我，我會提出更具體的答覆。

編輯2

請參閱this modification到原來的小提琴。它在Bootstrap上下文類中工作正常。這一次，我正在使用.info。

的修改，我提出：

移動的資源到資源面板。（我只是這麼做的，因爲網站建議這樣做，而且我不認爲顯示的表具有Bootstrap樣式，所以我認爲鏈接資源可能存在錯誤。）

我編輯了原始標記以使用Bootstrap類。

<table id="example" class="table table-striped table-bordered table-condensed" width="100%">

正如所提到的，我所用的自舉info類和添加了JavaScript的線將其添加到當前行之前除去從先前選擇的行中的類：
```
table.$('tr.info').removeClass('info'); 
    $(row.node()).addClass("info");` 
```

第二點是讓它起作用的關鍵 - 也就是說，始終使用Bootstrap CSS規則。（這和從前面的活動行中刪除類）。我意識到這個答案導致你的風格，你可能不會升值改變。但它回答了你的問題，爲什麼你必須定義一個select規則，並且可能你正在使用Bootstrap，因爲你喜歡他們的樣式選擇。

來源

2016-02-19 03:19:50 Karl

到目前爲止，我正在使用@stdob提供的解決方案;使用一個新的類。我在提供的小提琴中嘗試了您的建議，但並未突出顯示該行。 – gaitat

對於遲到的回覆感到抱歉。雜耍項目。謝謝你的詳細解釋。我認爲你應該在你的回答中強調這些風格是錯誤的，並且'daTatable'類和'bootstrap'類不能很好地結合在一起;我在'dataTables'的文檔中沒有看到的東西。 – gaitat

@gaitat - 我不認爲這是思考的方式，他們不能很好地一起玩。事實上，我認爲這是相反的！ DataTables插件具有原生的外觀和感覺。但是，它也支持其他樣式，例如Bootstrap和Foundation。想想作爲皮膚鏈接的css文件。通過鏈接Bootstrap「皮膚」，開發人員可以繼續使用Bootstrap類並忽略本機DataTable類。如果他們在一起工作不好，開發人員將不得不使用本地類名來獲得Bootstrap外觀。我同意，文檔可能是明確的。 – Karl

使用keyTable擴展在DataTable中突出顯示所選行

回答

相關問題