datatable動態列處理,重繪表格(敲黑板,劃重點!!!我肝了一天半才徹底弄懂這個東西,TAT)

来源:https://www.cnblogs.com/qq946487854/archive/2019/01/12/10261121.html
-Advertisement-
Play Games

datatable動態列處理,重繪表格 前言:至於動態列的繪畫,我前面博客已經寫過了,就是動態列的配置問題,不懂的去我博客看下,今天要寫的呢,就是你已經寫了一個動態列在datatable,現在你想重新繪製一遍這個表格,而且也是動態列的,裡面有很多細節需要註意。 首先,說一下動態列的配置,就是要在da ...


                                                                  datatable動態列處理,重繪表格

       前言:至於動態列的繪畫,我前面博客已經寫過了,就是動態列的配置問題,不懂的去我博客看下,今天要寫的呢,就是你已經寫了一個動態列在datatable,現在你想重新繪製一遍這個表格,而且也是動態列的,裡面有很多細節需要註意。

         首先,說一下動態列的配置,就是要在datatable配置下修改columns和data,代碼如下。

 1 var aaa.datatable = $('#aaa').DataTable({
 2             'language': lan,
 3             "dom": 'lB<"top"f><"toolbar">rt<"bottom"ip><"clear">',
 4             "paging": true,
 5             "lengthChange": true,
 6             "info": true,
 7             'destroy': true,
 8             "deferRender": true,
 9             'columns': this.data.col_define,
10             'data': this.data.rowdata,
11         })

          culumns里的this.data.col_define列定義是後臺返回的data數據下有個col_define列表,列表下放著targets(列,從0開始),data(對應data下的鍵key),title(列名或者叫做列標題),

   data里的this.data.rowdata行數據定義是後臺返回的data數據下有個rowdata列表,列表下放著每一行的鍵值對數據,每行用字典封裝。其他的都是datatable的基本配置,想要修改成想要的其他控制項可以看官網修改。

然後,就是繪製完表格怎麼清表格了,搜索了官網和很多其他博客,大概思路就是用destroy,clear,empty。

 

        這裡要分別解釋三個功能,第一是destroy()方法,是破壞整個表格結構,clear是清除放入的數據,需要註意的是,有人會問只用destroy不行嗎,當然不行啊,因為之前列定義和行數據的放入,裡面已經有數據了,你destroy只是清除了表格的結構,數據還在的,所以就會導致你的數據並沒有真正清除完,還有就是empty方法,這個是用來清空datable的,這個清空,和前面兩種不用,這個是清楚整個div的,所以用法也不一樣,在這裡我就饒了半天彎路,後面封裝對象起來就容易很多了

記住,destroy和clear是datatable清除的,empty是div清除的.

       舉個例子:

var table1=$('#aaa');
var int_table1=$('#aaa').Datatable();
int_table1.destroy();
int_table1.clear();
table1.empty();

        那麼,接下來就是,把這些清除表格的方法封裝到render函數即可。

 render(table) {
        table.clear();
        table.destroy();
    }

       這裡需要提醒的是,把empty給拿出來,到時候具體重繪的時候再指定div去清除。還有這裡的table,指的就是上面說的某div的datatable()。

結合起來,你需要封裝的對象就出來了。

class Object {
    constructor(table) {
        this.data = {};
        this.table=table;
    }
    init(table1) {
        return this.table=table1.DataTable({
            'language': lan,
            "dom": 'lB<"top"f><"toolbar">rt<"bottom"ip><"clear">',
            "paging": true,
            "lengthChange": true,
            "info": true,
            'destroy': true,
            "deferRender": true,
            'columns': this.data.col_define,
            'data': this.data.rowdata,
        })
    }
    render(table){
        table.clear();
        table.destroy();
    }
}

        這裡你會發現,我把這裡的table1給標紅了,為什麼呢,因為我在這裡摔慘了2333333.這裡的table1指的就是前面提到的$('aaa'),所以不要多次一舉的把table1.Datatable寫成$(table1).Datatable。能做到這裡,已經說明你的思路已經非常完善了,說明你已經成功了一半,下麵就是AJAX的數據交互。

         對了,在AJAX之前,你要先聲明好你的對象。

table=$('#aaa');
int_table=$('#aaa').Datatable();
obj=new Object(table);
  $.ajax({
        type: 'POST',
        url: '/url',
        async: true,
        cache: false,
        data: {},
        dataType: 'json',
        beforeSend: function () {
        },
        success: function (res) {
            if ('ok' === res['code']) {
                obj.render(int_table);
                table.empty();
                console.log(table);
                obj.data = res['data'];
                obj.init(table);
                console.log(table);
            } else {
                alert('失敗' + res['msg']);
            }
        },
        complete: function () {

        },
        error: function (jqXHR, textStatus, errorThrown) {
            var e = JSON.parse(jqXHR.responseText);
            console.log('失敗'+e['msg']);
        }
    });

       當然,能夠完成到這裡,你已經很厲害了,因為你可以自定義列,然後重繪,再自定義列,封裝起來的函數以後也可以接著用。

      但是,我就算完成到了這一步,我在另一個地方重繪表格的地方,居然還是報錯了,找了很久,反覆校對了很多遍,終於給我找到錯誤了,就是一開始那個datatable我沒有初始化,導致我清除和賦值的時候出現了問題。

       所以,大家在用datatable的時候,一定要記得初始化表格。

$('#aaa').Datatable(opts);

       opts裡面的配置正常寫就行,反正是初始化的,到時候你重繪表格的時候就會清除掉這個初始化表格。(重繪表頭和行的就講到這裡了,不懂可以在下方提問,思路應該挺清晰的了)

這裡我再附帶一個TIP,如果你只是重繪數據,表頭不換,那麼你就可以用到下麵這個render函數,這也是我一開始接觸的只清除數據不清除表頭的方法。

render(table) {
        var currentPage = table.page();
        table.clear();
        table.rows.add(this.staff_list);
        table.page(currentPage).draw(false);
    }

        這個用來更新數據就很爽了,或者你用window.location.reload來更新整個頁面,重新獲取後臺的數據初始化表格來刷新頁面。其他的單純刷新datatable方法也有就是table.draw(false)。不過這個會預設翻到第一頁,所以我這裡才會還有一個table.page();

        工作經驗:前端報錯一定不要著急,看控制台報的什麼錯,再看前後端數據交互是否傳送了正確的數據,如果沒錯,那就硬肝前端的錯吧,datatable出現的大多數錯誤都是行列沒對準這些錯誤,其實有時候並不是後端的錯,可能多數都是前端繪製表格的時候出錯了,關鍵就是找清除你自己寫的代碼的每一步,必要時多console.log一下,看下是否每一步都是你想要的結果,偶爾會出現undefined或者為空,那麼,恭喜你,你找到錯誤了,離成功也就不遠啦。

(前端實習的臨近一個月,加油繼續肝,最近的梗,是("盤"給我),我也覺得怪怪的,最近喜歡的歌,(小了白了兔,錘子之歌),都很魔性,哈哈哈哈哈哈哈哈哈哈哈哈哈嗝!)

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用plsql連接時,發現報ora-28040 No matching authentication protocol 趕緊查了查MOS,原來在預設情況下Oracle12.2對客戶端版本有限制, 解決方法:升級Oracle客戶端或者修改sqlnet.ora中的以下兩個參數控制: SQLNET.ALL ...
  • 每天要複習老師講的內容,老師辛辛苦苦的叫我們知識,我們就要努力去掌握,每天複習一點點! 註:這些都是複習之前老師講到sqlserver基礎語法! 好啦!就這麼多啦!準備複習高級的知識! ...
  • alert報錯2019-01-12T10:10:11.499130+08:00Errors in file /u01/app/oracle/diag/rdbms/rac1/rac112/trace/rac112_j000_119621.trc:ORA-12012: error on auto exe ...
  • 本文以一個簡單的小例子,簡述在Android開發中ToggleButton(開關按鈕)和Switch(開關)的簡單使用,僅供學習分享使用。 ...
  • com.daimajia.slider.library.SliderLayout 是挺好用的輪播圖控制項,但是底部灰色背景有時候用不到,所以得去掉。 sliderLayout.setCustomAnimation(new DescriptionAnimation()); 這個方法是設置灰色背景動畫 我 ...
  • [toc] 首發日期:2019 01 13 字體圖標的介紹 什麼是字體圖標? 在電腦上,文字本質上都是一些像素點,而圖標也是一些像素點,那麼有沒有辦法把某個字體的字做成圖標的樣子呢?於是有了字體圖標這種東西。字體圖標本質上是一種字體,不過它在表現意義上是一個圖標。 為什麼使用字體圖標?有什麼好處? ...
  • (二)頁面展示 各位朋友大家好,我們接著上文繼續開發,這一節我們主要是把上一節最後的圖片素材從新組合,用web形式展現,我們用到的主要工具是:HBuilderX,這個工具我就不介紹了,上手很容易,很好用的,具體情況大家可以百度研究一下。 1.新建項目 首先啟動HBuilderX開發工具,新建一個項目 ...
  • Web產品中很多時候需要在客戶端,即瀏覽器中保存一些必要的數據。而面臨這類需求時,你應當知悉對應的解決方案不僅僅只有一種。 Cookie 這是最早被使用,且至今仍被廣泛採用的最簡單的瀏覽器中保存數據方法。 Cookie使用鍵/值形式存儲數據,且數據類型只能為字元串。 Cookie相關的CRUD操作: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...