2015-10-31 13 views
6

Ok, quindi ho una chiamata JQuery JSON. Sembra un po 'come questo.Colspan Datable Jquery su alcune righe

$('#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() }; 
      } 
    }); 

e genera questa tabella:

+------------+---------+----------+------------+ 
| 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  | 
+------------+---------+----------+------------+ 

voglio unire i primi 2 colonne se è sintesi è vero. Dovrebbe sembrare come questo.

+------------+------+----------+------------+ 
| 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  | 
+-------------------+----------+------------+ 

E ovviamente ci sarebbero più mesi nella lista. Il vostro aiuto sarebbe molto apprezzato

+2

La soluzione deve utilizzare la funzione datatable? O potrebbe essere qualsiasi cosa. Anche un violino del tavolo sarebbe fantastico .. –

+2

Usiamo la funzione datatable in tutta la nostra app e proviamo a uniformarci in tutte le pagine – TheProvost

+0

puoi dare un esempio del JSON? – davidkonrad

risposta

6

TheProvost. Ho passato molte ore a risolvere questo problema e alla fine l'ho capito. Spero che questo ti possa aiutare.

Ecco la risposta del problema:

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 
      }); 

     } 
}); 

lo spero opere. -Saluti!^_^

--KKK

+1

Tnx !!! Mi ha salvato un giorno cercando di capirlo :) Non si può ancora concedere Bounty. Lo ricompenserò non appena sarà disponibile – TheProvost

Problemi correlati