tablesorter.js 排序問題

js jquery javascript

a9966557 2020-08-17 00:31:45 ‧ 1668 瀏覽

分享至

大家好,新手發問
最近在弄有關table排序的東西
發現這個好用的js檔

但因為我的資料列裡有字串百分比 xx.x % 要做排序
而且要指定某幾個行(但不能寫死)
但是寫成變數好像不能生效...，請問有人有解過這種問題嗎？謝謝
Code如下

$.tablesorter.addParser({
           id: "custom_date1", //小數點排序
           is: function(s) {
                   return false; //關閉自動轉換
           },
           format: function(s) {
                  return parseFloat(s.replace(/\,/g,"")); //轉換為數字
           },
           type: "numeric" //應用數字類排序
});

//以下sort為變數
var sort1 = 0;
var sort2 = 2;
var sort3 = 4;
var sort4 = 6;
var sort5 = 8;

//改成變數後沒有發揮功能
jTable.tablesorter({headers:{sort1:{sorter:"custom_date1"},sort2:{sorter:"custom_date1"},sort3:{sorter:"custom_date1"},sort4:{sorter:"custom_date1"},sort5:{sorter:"custom_date1"}}});

dragonH iT邦超人 5 級 ‧ 2020-08-17 00:47:53 檢舉

給你個線索

把你給

jTable.tablesorter(object)

的 object

印出來看

看是不是你想的那樣

我猜不是

看你好像沒再回應回答你的人

我就省起來了

a9966557 iT邦新手 5 級 ‧ 2020-08-17 12:12:40 檢舉

謝謝妳的回覆
印出來看,真的跟我想得差很多

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

glj8989332

iT邦研究生 4 級 ‧ 2020-08-17 10:09:06

最佳解答

最主要是headers變數的sort欄位不可以直接用變數宣告, 要另外先組一個object再放進headers

我做的範例參考看看
故意把百分比改成前後有多餘的字串, 再用正規表示移除非數字並轉成數字.

Html:

<table id="tablesorter-demo" class="tablesorter-blue">
  <thead>
    <tr>
      <th>Discount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>d20.9%%%%</td>
    </tr>
    <tr>
      <td>c25%%%%%</td>
    </tr>
    <tr>
      <td>b44%%%%</td>
    </tr>
    <tr>
      <td>g66%%%%%</td>
    </tr>
  </tbody>
</table>

js:

$.tablesorter.addParser({
           id: "custom_date1", //小數點排序
           is: function(s) {
                   return false; //關閉自動轉換
           },
           format: function(s) {
                  return parseFloat(s.replace(/[^0-9\.]+/g,"")); //轉換為數字
           },
           type: "numeric" //應用數字類排序
});

var sort1 = 0;
var headersObj = {};
headersObj[sort1] = { sorter: 'custom_date1' };
$("table").tablesorter({
  theme : 'blue',
  headers: headersObj
 
});

我的jsfiddle

回應 3
分享
檢舉

a9966557 iT邦新手 5 級 ‧ 2020-08-17 11:23:52 檢舉

謝謝回覆,
請問一下如果有多個欄需要自定義排序的話,如何寫
我try了一陣子,不知道哪裡有問題...

var headersObj1 = {};
var headersObj2 = {};
var headersObj3 = {};
var headersObj4 = {};
var headersObj5 = {};

headersObj1[sort1] = { sorter: 'custom_date1' };
headersObj2[sort2] = { sorter: 'custom_date1' };
headersObj3[sort3] = { sorter: 'custom_date1' };
headersObj4[sort4] = { sorter: 'custom_date1' };
headersObj5[sort5] = { sorter: 'custom_date1' };

jTable.tablesorter({
	headers: {headersObj1,headersObj2,headersObj3,headersObj4,headersObj5}
});

glj8989332 iT邦研究生 4 級 ‧ 2020-08-17 11:43:50 檢舉

a9966557
只需要一個headersObj就好, 最後可以用console.log(headersObj); 看看它包裝了什麼.

headersObj[sort1] = { sorter: 'custom_date1' };
headersObj[sort2] = { sorter: 'custom_date1' };
headersObj[sort3] = { sorter: 'custom_date1' };
jTable.tablesorter({
	headers: headersObj
});