JQuery DataTables - Satır Gruplama, Toplam, Katlanabilir, Dışarıya Aktarma

Question

Uzun zamandır JQuery DataTables kullanıyorum. Bu, ilk defa satır gruplaması ile çalışacağım. Başlamak istediğim yere iyi bir örnek buldum. -

1. Grouping nasıl fazladan <td> gruplandırılmış satıra eklersiniz? Gruplanmış maaşların toplamını bu gruplandırılmış satırda görüntülemek istersem ne yapmalıyım? Şu anda, sadece grubun adını görüntüleyebileceğiniz gibi görünüyor.

onlar Here ve Here olduğu gibi bu satırların katlanabilir yapabilir miyim
2. ? Bu, orijinal gruplama kodundan farklı bir eklenti gibi görünüyor. This look benim tercihim olurdu, ancak alt satırlarla çalışmak, gruplandırma ile aynı görünmüyor.

Bilgi

Ek ben bir Ajax kaynaktan veri iade edilecektir.

GÜNCELLEME 1

Yani, satır gruplama içeren bir tablo inşa edilmiş ve bir sütun özetlemek nasıl this example bulundu. Bu değeri o grup satırında <td>'a bağlıyorum. Tek ihtiyacım olan şey, bu toplam miktarın, tüm sütunun toplamı yerine, gruplara nasıl bölünmesidir. Bununla ilgili yardıma ihtiyacım var.

"drawCallback": function (settings) { 
    var api = this.api(), data; 
    var rows = api.rows({ page: 'current' }).nodes(); 
    var last = null; 

    //Calculates the total of the column 
    var total = api 
     .column(5) //the salary column 
     .data() 
     .reduce(function (a, b) { 
      return a + b; 
     }, 0); 

    //Groups the Office column 
    api.column(2, { page: 'current' }).data().each(function (group, i) { 
     if (last !== group) { 
      $(rows).eq(i).before(
       '<tr class="group"><td>' + group 
       + '</td><td></td><td></td><td></td><td>' 
       + total + '</td></tr>' 
      ); 

      last = group; 
     } 
    });     
} 

DataTable tüm ihtiyacım işlevselliği sağlayabilir gibi bana görünmüyor 2

GÜNCELLEME. Satır gruplandırması alt toplamlar veya daraltılmış olarak oluşturulmamış. Bunu yapmak için özel bir şey oluşturabilsem bile, bu grup satırlarının ihracat sırasında yakalanmamasına benziyor, ki bu da ihtiyacım olan başka bir gereksinim. Muhtemelen başka bir rotaya gitmem gerekecek. Birisi tüm bu ihtiyaçları karşılayamazsa, rahatsız etme.

GÜNCELLEME 3

yerine Kendo Izgaralara gitmeye karar verdik. Bu işlevin tümü zaten yerleşiktir.

Answer 1

Kodunuzu kontrol edip verilen bağlantıyı örnek olarak gözden geçiriyorum.

Ben de senin UPDATE

Ben **Kendo Grids** şartının iyi seçenek olduğunu buldular kontrol etmelerini sağlayın.

Yani ben kullanmayı öneriyoruz: GÜNCELLEME 3

Answer 2

"drawCallback": function (settings) { 
 
\t var api = this.api(),data; 
 
\t var rows = api.rows({page:'current'}).nodes(); 
 
\t var last=null; 
 
\t 
 
\t // Remove the formatting to get integer data for summation 
 
\t var intVal = function (i) { 
 
\t \t return typeof i === 'string' ? 
 
\t \t \t i.replace(/[\$,]/g, '')*1 : 
 
\t \t \t typeof i === 'number' ? 
 
\t \t \t \t i : 0; 
 
\t }; 
 

 
\t total=new Array(); 
 
\t api.column(2, {page:'current'}).data().each(function (group, i) { 
 
\t  group_assoc=group.replace(' ',"_"); 
 
     if(typeof total[group_assoc] != 'undefined'){ 
 
      total[group_assoc]=total[group_assoc]+intVal(api.column(5).data()[i]); 
 
     }else{ 
 
      total[group_assoc]=intVal(api.column(5).data()[i]); 
 
     } 
 
\t \t if (last !== group) { 
 
\t \t \t $(rows).eq(i).before(
 
\t \t \t \t '<tr class="group"><td colspan="4">'+group+'</td><td class="'+group_assoc+'"></td></tr>' 
 
\t \t \t); 
 
\t \t \t 
 
\t \t \t last = group; 
 
\t \t } 
 
\t }); 
 
    for(var key in total) { 
 
     $("."+key).html("$"+total[key]); 
 
    } 
 
}

Answer 3

Kontrol dışarı kodunuzda satırını .. "if (son!

• expands->
• biçiminde yakın şekilde> Her iki grup eleman örneği tarifesi işlev 'cerrar'

aramalar 'abrir' işlevini çağırır: 'MAZDA == grubu) I2 düğme eklendi ', 'TOYOTA', 'BMW abrir 've 'cerrar'' Burada

if (last !== group) 
{ 
groupid++; 
alert(group); 
$(rows).eq(i).before(
'<tr class="group father_' + group + ' text-right"><td class="text-left"><text class="order">' 
+ group + 
'</text>'+ 
' <i class="fa fa-plus-square-o" aria-hidden="true" btn btn-default btn-xs" onclick="abrir(\''+group+'\')">'+ 
' <i class="fa fa-minus-square-o aria-hidden="true" btn btn-default btn-xs" onclick="cerrar(\''+group+'\')">'+ 
'</td></tr>'); 
last = group; 
} 

işlevleri vardır' onlara datatables komut dosyasının dışında koymak

<script> 
    function abrir(group) { 
     $(".collapse_"+group).collapse("show"); 
    } 

    function cerrar(group) { 
     $(".collapse_"+group).collapse("hide"); 
    } 
</script> 

Sonra drawcallback sonra (bu ipucu) kullanın:

"fnRowCallback": function (nRow, aData, iDisplayIndex) 
{ 
    nRow.className = "collapse collapse_" + aData.LINEA; 
    return nRow; 
}, 

Ne Im burada ne ... "çöküşü" ve kendi sınıf collapse_ + A-DATA önyükleme sınıf eklemek her basit satır için? linea böylece nihayet tarafından Im gruplama o de alandır .LINEA -> class = "collapse_MAZDA çökecek" class =

Bu elementler varsayılan olarak gizli olabilir, "collapse_BMW çöküş" ne zaman grubu satırlarına üzerinde Eğer eylem düğmeleri "collapse_MAZDA" AN

sınıfına sahip olan öğeleri arayacak