current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

Using datatable I am able to display all required information in a single row. Due to space constraints I wish to display one of the column (comment) under another column (name) in the same row

.

Current:

Row1 Column1 | Row1 column2 | Row1 column3

Row2 Column1 | Row2 column2 | Row2 column3

Row3 Column1 | Row3 column2 | Row3 column3

.

Required:

Row1 Column1 | Row1 column2

Row1 column3 |

Row2 Column1 | Row2 column2

Row2 column3 |

Row3 Column1 | Row3 column2

Row3 column3 |

Code

dishTable = $('#dishtable').dataTable({
             //"bJQueryUI": true,
//          "sPaginationType": "full_numbers",
//          "iDisplayLength": 7,
            "sScrollY": "80%",
            "sScrollX": "100%",
            "bPaginate": false,
            "sAjaxSource": "amsrequestprocessor?action=amsretrieveorder&source=ams",

..........


"aoColumns": [
                          { "sTitle": "SNo", "sClass":"dish_ID",   "mDataProp": "sno" },
                          { "sTitle": "Name",  "sClass":"d_name", "mDataProp": "dishname" },
                          { "sTitle": "List-Price",  "sClass":"dish_per_price", "mDataProp": "price" },
                          { "sTitle": "Bill-Price",  "sClass":"dish_per_billprice", "mDataProp": "billprice" },
                          { "sTitle": "Qty", "sClass":"dish_qty",   "mDataProp": "qty" },
                          { "sTitle": "Total", "sClass":"dish_tot", "mDataProp": "total" },
                          { "sTitle": "Customization", "sClass":"dish_comment", "mDataProp": "comment" },
                          { "mDataProp": null,"sClass":"rowEdit","bSortable": false},
                          { "sClass":"rowDel", "mDataProp": null,"bSortable": false},
                          { "sClass":"rowId", "bSortable": false, "mDataProp": "id"}
                         ]      

        });
    }

HTML:

<table id="dishtable" class="display">
    <thead>
        <tr>
            <th class="sno">SNo</th>
            <th class="d_name">Name</th>
            <th>List-Price</th>
            <th>Bill-Price</th>
            <th>Qty</th>
            <!-- <th>State</th>  -->
            <th>Total</th>
            <th>Customizations</th>
            <th width=16px height=16px></th>
            <th width=16px height=16px></th>
            <th class="rowId"></th>
        </tr>

    </thead>
    <tbody>
    </tbody>
    </table>
share|improve this question
    
OK, so that's your table structure, now where's the javascript? –  Beetroot-Beetroot Mar 26 '13 at 7:06
    
I have put the relevant datatables code above.. pls let me know if you need more information –  takrishna Mar 26 '13 at 7:18
    
Two rows from one is likely to give problems if the table is sorted; you would need to take tricky measures to keep each row-pair together. It would be a whole lot easier to keep each row as a single row - eg. with column1String<br>column3String in the first table cell of each row. This could be achieved server side, or client-side by processing the rows with eg. a fnDrawCallback or fnRowCallback. –  Beetroot-Beetroot Mar 26 '13 at 7:43
1  
Thanks @Beetroot-Beetroot I have managed to tweak my service to render appropriately than to find a way through JavaScript - As the solution seems to be complex and more demanding to make it work in all the browsers –  takrishna Apr 2 '13 at 7:59
    
takrishna, yes, although I'm a client-side person, that's exactly what I would do. –  Beetroot-Beetroot Apr 2 '13 at 9:08

2 Answers 2

up vote 0 down vote

By using colspan we can split the td and using width we can align the table..

 <table width="100%">
    <tr><td width="50%">td1</td><td width="50%">td2</td>
    <td colspan="2">td1&2</td></tr>
    </table>
share|improve this answer
    
How could i apply this to a datatable ? (Datatable jquery plugin) –  takrishna Mar 26 '13 at 7:11
up vote 1 down vote accepted

Thanks @Beetroot-Beetroot

I have managed to tweak my backend service to render appropriately than to find a way through JavaScript - As the solution seems to be complex and more demanding to make it work in all the browsers

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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