2015-10-31 14 views
6

私はJqueryのjson呼び出しを持っているので、これはやや似ています。いくつかの行のJquery Datatable Colspan

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

そして、それは、このテーブルを生成します。

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

私は要約が真である場合は、最初の2列をマージしたいです。それはこのように見えるはずです。

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

もちろん、リストにはさらに数ヶ月があります。あなたの助けは大いに評価されるでしょう

+2

ソリューションは、データテーブルの機能を使用する必要がありますか?それは何でもかまいません。また、テーブルのフィドルは素晴らしいでしょう.. –

+2

私たちのアプリケーション全体でdatatable関数を使用しているとすべてのページを介して制服しようとしている – TheProvost

+0

JSONの例を挙げることができますか? – davidkonrad

答えて

6

TheProvost。私はこの問題を解決するために何時間も費やしてきました。これが助けてくれるといいなあここで

はあなたの問題の答えです:

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

     } 
}); 

私はそれが作品を願っています。 -乾杯!^_^

--KKK

+1

Tnx !!!これを理解しようとしている1日を救った:)バウンティはまだ授与されない。それが利用可能になると直ちにそれを報います – TheProvost

関連する問題