6

Ok so I have a Jquery json call. It looks somewhat like this.

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

And it generates this table:

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

I want to merge the first 2 columns if is summary is true. It should look like this.

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

And of course there would be more months in the list. Your help would be greatly appreciated

6
  • 2
    Does the solution should use datatable function? Or it could be anything. Also a fiddle of the table would be great..
    – Bla...
    Oct 31, 2015 at 4:57
  • 2
    We are using datatable function all throughout our app and trying to be uniformed through all pages
    – TheProvost
    Oct 31, 2015 at 4:59
  • can you give an example of the JSON? Oct 31, 2015 at 6:38
  • What do you mean an expample of Json bro? Please see the json call. The value of the result is in the table.
    – TheProvost
    Oct 31, 2015 at 7:17
  • 2
    @TheProvost, I mean the JSON - I do not want to reverse engineer it. My intent was to suggest an alternative solution - you cannot have real colspans in a dataTable body. Oct 31, 2015 at 8:30

1 Answer 1

8
+100

TheProvost. I've spent many hours to solve this problem, and I finally got it. I hope this will help.

Here is the answer of your problem:

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

       }
});

I hope it will works. -Cheers! ^_^

--KKK

1
  • 1
    Tnx!!! Saved me a day trying to figure this out :) Bounty cant be awarded yet though. Ill reward it as soon as its available
    – TheProvost
    Nov 3, 2015 at 2:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.