2015-10-31 8 views
6

Ok, also habe ich einen Jquery Json Anruf. Es sieht ungefähr so ​​aus.Jquery Datatable Colspan auf einigen Zeilen

$('#StockInvetoryReportList').dataTable({ 
     "filter": false, 
     "bLengthChange": false, 
     "bPaginate": false, 
     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": "@Url.Action("GetStockInventoryBalance", "Reports")", 
     "aoColumns": [{ "mData": "Date"}, 
     { "mData": "Name" }, 
    { "mData": "Quantity" }, 
    { "mData": "isSummary" } 
    ], 
      "fnServerParams": function (aoData) { 
       aoData.push({ "name" : "StockNo", "value": $('#MaterialName').val() }), 
       { "name": "ReportDate", "value": $('#ReportDate').val() }; 
      } 
    }); 

Und es erzeugt diese Tabelle:

+------------+---------+----------+------------+ 
| Date | Name | Quantity | Is Summary | 
+------------+---------+----------+------------+ 
| 10/01/2015 | Wire | 500  | False  | 
+------------+---------+----------+------------+ 
| 10/05/2015 | Wire | 500  | False  | 
+------------+---------+----------+------------+ 
| 10/15/2015 | Wire | 600  | False  | 
+------------+---------+----------+------------+ 
| 10/18/2015 | Wire | 100  | False  | 
+------------+---------+----------+------------+ 
| 10/19/2015 | Wire | 200  | False  | 
+------------+---------+----------+------------+ 
| 10/31/2015 | October | 1900  | True  | 
+------------+---------+----------+------------+ 

Ich möchte die ersten 2 Spalten fusionieren, wenn ist Zusammenfassung wahr ist. Es sollte so aussehen.

+------------+------+----------+------------+ 
| Date | Name | Quantity | Is Summary | 
+------------+------+----------+------------+ 
| 10/01/2015 | Wire | 500  | False  | 
+------------+------+----------+------------+ 
| 10/05/2015 | Wire | 500  | False  | 
+------------+------+----------+------------+ 
| 10/15/2015 | Wire | 600  | False  | 
+------------+------+----------+------------+ 
| 10/18/2015 | Wire | 100  | False  | 
+------------+------+----------+------------+ 
| 10/19/2015 | Wire | 200  | False  | 
+------------+------+----------+------------+ 
| October   | 1900  | True  | 
+-------------------+----------+------------+ 

Und natürlich würde es mehr Monate in der Liste geben. Ihre Hilfe würde sehr geschätzt werden

+2

Soll die Lösung Datatable-Funktion verwenden? Oder es könnte alles sein. Auch eine Geige des Tisches wäre großartig. –

+2

Wir verwenden Datatable-Funktion alle in unserer App und versuchen, durch alle Seiten uniformiert werden – TheProvost

+0

können Sie ein Beispiel für die JSON geben? – davidkonrad

Antwort

6

TheProvost. Ich habe viele Stunden damit verbracht, dieses Problem zu lösen, und ich habe es endlich verstanden. Ich hoffe, das wird helfen. Hier

ist die Antwort des Problems:

var dgv_StockInvetoryReportList = $('#StockInvetoryReportList').dataTable({ 
     "filter": false, 
     "bLengthChange": false, 
     "bPaginate": false, 
     "bProcessing": true, 
     "bServerSide": true, 
     "bSort": false, 
     "sAjaxSource": "@Url.Action("GetStockInventoryBalance", "Reports")", 
     "aoColumns": [{ "mData": "Date", "mRender": function (data, type, full) { return dtConvFromJSON(data); } }, 
     { "mData": "Name" }, 
     { "mData": "Quantity" }, 
      { "mData": "isSummary" }, 
     ], 
     "fnServerParams": function (aoData) { 
      aoData.push({ "name": "StockNo", "value": $('#MaterialName').val() }); 
      aoData.push({ "name": "ReportDate", "value": $('#ReportDate').val() }); 
     }, 

     //Here is the answer that I've created, 
     //All you have to do is to insert ID in every row that your datatable 
     //created 
     'fnCreatedRow': function (nRow, aData, iDataIndex) { 
      var cells = $('td', $(nRow)); 
      //I suggest you to make the word "TOTAL SUMMARY" instead of 
      //name of the month.. ^_^ 
      if ($(cells[1]).text().indexOf("//Insertthemonthhere") != -1) { 
      $(nRow).attr('class', '//Name of the Class'); 
      } 
     }, 
     //And here is where the cells span 
     "drawCallback": function() { 
      $("tbody").find("tr.total").each(function() { 
        var cells = $('td', this); 
        $(cells[1]).attr('colspan', 3); //adding span by 3 
        $(cells[2]).remove(); //remove the cell 
        $(cells[0]).remove(); //remove the cell 
      }); 

     } 
}); 

Ich hoffe, es wird funktioniert. -Prost!^_^

--KKK

+1

Tnx !!! Rettete mir einen Tag, um das herauszufinden :) Bounty kann aber noch nicht vergeben werden. Ich werde es belohnen, sobald es verfügbar ist – TheProvost