iT邦幫忙

0

請問,有無試過,將DataTable 的 <td>...</td> 部份分柝到另一檔案?

  • 分享至 

  • xImage

我在更新一個大集合其它各個DataTable的Data時,因為人手Copy&Paste,經常忙記有沒有做到,渡至錯漏而找不到資料。所以,就想抽起<td>...</td> 部份分柝到另一檔案這概念,各個DataTable的Data都有一個data檔案,而那個大集合的DataTable會加入各個小DataTable的Data而型成,但我不知到什麼方法才可以合併?而我並沒有使用Php+Database,只想用JS+CSS+HTML做到,可以幫幫忙嗎?有沒有完整的案例可下載或睇到呢?

MoMoDIYer iT邦新手 5 級 ‧ 2021-06-16 11:06:40 檢舉
最後,終於明白有幾種方式整合外部data,我也只能明白及運用一兩種。https://datatables.net/examples/ajax/
在這裡找到官方的使用方法。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
japhenchen
iT邦超人 1 級 ‧ 2021-05-23 10:14:27
最佳解答

跑ajax抓json來做table

javascript的ajax的部份,偷懶所以用jQuery

function calllNeverConfirmed() {
    $.post({
            url: 'admin.php',
            dataType: "json",
            data: {
                action: "GetNeverConfirmedData"
            }
        })
        .done(function(d) {
            let vtable = $("<table class='rtable'></table>");
            if (d.length > 0) {
                let trh = $("<tr></tr>");
                //建th
                Object.entries(d[0]).forEach(entry => {
                    const [key, value] = entry;
                    if (!key.startsWith('-')) { 
                        // 如果欄位名字前面有-就不處理
                        // 帶 - 的欄位是有特殊用意
                        trh.append($(`<th>${key}</th>`));
                    }
                })
                vtable.append(trh);

                d.forEach(function(i, v) {
                    let tr = $("<tr></tr>");
                    Object.entries(i).forEach(entry => {
                        const [key, value] = entry;
                        let tvalue = value;
                        if (!key.startsWith('-')) {
                            if (value.indexOf("detail://") >= 0) {
                                // 如果內容是detail://開頭,則用按鍵
                                tvalue = $(`<button class="buttonDetail">展開</button>`);
                                // 在這個button裡塞資料
                                tvalue.data(i);                                
                                let td = $("<td></td>");
                                td.append(tvalue);
                                tr.append(td);
                            } else {
                                let td = $("<td></td>");
                                td.text(tvalue);
                                tr.append(td);
                            }
                        }
                    })
                    vtable.append(tr);
                });
            }
            $("#reportNeverConfirmedData").append(vtable); //塞回頁面
        });
}

php的部份,用pdo抓資料庫,方法略述

function getNeverConfirmedData()
{
    global $pdo;
    $statement = $pdo->prepare(
        "SELECT 
            `id` as `流水號` 
            ,`applydate` as `申請時間`
            ,`ALIVER_NAME` AS `申請人`
            ,`ALIVER_TEL` AS `連絡電話`
            ,CASE `PAYMENTMETHOD` WHEN 0 THEN '預付' WHEN 1 THEN '現金袋' WHEN 2 THEN concat('匯款',`memo`) END `付款方式`
            ,`SUM` AS `金額`
            ,concat('detail://',`uid`) AS `明細`
         FROM `nbs_worship`.`applyments` as `m`
         WHERE `m`.`CONFIRMED` = 0 ;"
    );
    $statement->execute();
    
    //直接就把這個dataset做成json丟回前端,就上上述的javascript裡的方法
    return json_encode($statement->fetchAll(PDO::FETCH_ASSOC));
}
看更多先前的回應...收起先前的回應...
MoMoDIYer iT邦新手 5 級 ‧ 2021-05-27 11:09:43 檢舉

有沒有完整案例檔可下載來看看?

看你要的是什麼樣的範例

1、後端把資料庫的查詢結果直接丟JSON出來,前端javascript再把JSON轉成TABLE輸出在頁面上

2、後端把前端要找的東西上網爬,爬到的結果用JSON傳回前端javascript再跟上一例一樣轉成HTML用TABLE或bootstrap DIV ROW/CELL輸出

看你慣用的是什麼後端平台,前端用不用js框架

MoMoDIYer iT邦新手 5 級 ‧ 2021-05-28 08:15:27 檢舉

好感謝您的提意,但我的情況也像您所說,已將data分柝出來,一個HTML檔用JS去load JSON檔。但想做一個整合版本,將所有的JSON檔合併在一個datatables顯示。就是遇到這問題,不知怎樣才能合併多個在一起?謝謝?

重點是,這多個來源的json是否有相同的dictionary型式

{
    "a":"1",
    "b":"11",
    "c":"111",
    "d":"............"
}    
MoMoDIYer iT邦新手 5 級 ‧ 2021-06-01 11:16:42 檢舉

可以給我製作一個簡單的例子,讓我下載後慢慢研究嗎?

你慣用語言跟SQL平台是?

MoMoDIYer iT邦新手 5 級 ‧ 2021-06-02 13:06:28 檢舉

我現時都是初學者,但基本HTML,CSS都算可以JS比較弱,而php則是從新學習。通常用NAS作為測試平台,而NAS可以行MySQL 及 MariaDB。而最近更新個人網站,已改用HTML+CSS+JS,原因是怕將來少玩編程而忙記,因為我興趣不止在寫網頁,也有別的DIY。而且想在落後國家教小朋友使用電腦時,要顧及頻寬而刻意不用/少用server side service。話晒外地網絡很差,可能只玩到內聯網。若果能不需使用SQL就更好,之前參考了很多別人講 dataTables的load from json/ajax,但自己真的一知半解,最後成功了,但只限於一對一。一個HTML之dataTables load入一個檔,但想加入兩個或以上時,便不知怎樣才能做到!

我要發表回答

立即登入回答