2016-12-24 46 views
0

我在那裏我從注射jQuery的AJAX響應數據直接進入DOM這樣的情況:數據注入jQuery的數據表,而不是直接到DOM

.done(function(data) { 
    StopLoading(); 
    var brands = $('<table />').append(data).find('#tableProducts').html(); 
    $('#tableProducts').html(brands); 
    var dbtb = $('<table />').append(data).find('#datatable-responsive').html(); 
    $('#datatable-responsive').html(dbtb); 

    $('#datatable-responsive').dataTable({ 

     "bDestroy": true 
    }); 
    var header = $('<div />').append(data).find('.bs-glyphicons').html(); 
    $('.bs-glyphicons').html(header); 
    $('#tableProducts thead, #header').fadeIn("slow"); 
    $('#emptyText').hide(); 
} 
}) 

這是棘手的部分:

var brands = $('<table />').append(data).find('#tableProducts').html(); 
$('#tableProducts').html(brands); 
var dbtb = $('<table />').append(data).find('#datatable-responsive').html(); 
$('#datatable-responsive').html(dbtb); 

$('#datatable-responsive').dataTable({ 

    "bDestroy": true 
}); 

注意,我從數據對象提取表,然後將其注入到瀏覽器的DOM。從那以後,我破壞並重新創建數據表...

我想在這裏改變的是,我不直接注入所有項目到DOM直接,而是將它傳遞給數據表,以便數據表中可以注入可以說,只有10-100第一項發現,並將其分成頁,因爲它確實...

我怎樣才能做到這一點?知道我在DATA對象中接收到的數據是HTML,並且jQuery中的Datatable只接收JSON格式,這是導致我遇到問題的原因。

所以問題是:

  1. 我可以通過HTML數據jQuery的數據表,讓它僅注入100項到表中(而不是作爲1000-2000它現在確實)

  2. 如果#1不可行,我可以從服務器返回JSON,然後將它注入到DT中。

  3. 如果#2是可行的,我怎麼能轉換成一個列表,TESTDATA的類型像以下:

    public class TestData 
    { 
        public string StoreName { get; set; } 
        public string Sales { get; set; } 
        public string Address { get; set; } 
        public string City { get; set; } 
    } 
    

成JSON格式是jQuery的數據表可以接受嗎?

+0

好像你正在嘗試手動解決建在數據表插件的功能強大,將盡一切在正確配置 – charlietfl

+0

@charlietfl你有一個非常好的問題,你已經描述!但有沒有什麼辦法可以直接將數據傳遞到數據表中,這樣我就可以避免向DOM注入1000-2500個項目,這是我的主要目標......由於datatable已經實現了分頁,我只想將它與我已經... –

+0

PS我也想弄清楚如何正確設置它,以便在數據注入DOM時我的瀏覽器網頁不會凍結 –

回答

0

是,如果你有一千加記錄您的瀏覽器將凍結,因爲循環,使HTML和客戶端上顯示的記錄。爲了避免這個問題,有很多解決方案,當你使用jQuery數據表插件時,你應該使用它的服務器端分頁,這裏的鏈接可以幫助你。

https://datatables.net/examples/data_sources/server_side.html

https://datatables.net/forums/discussion/28388/server-side-pagination-using-data-table

這些鏈接是真正有用的爲您服務。

https://www.codeproject.com/kb/aspnet/jquery-datatables-mvc.aspx

https://www.youtube.com/watch?v=oCouA3tuA3o