Databases
StackOverflow2013
Postsdbo
POHow to display data in two rows instead of the default one row using JQuery Datatables?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to display data in two rows instead of the default one row using JQuery Datatables?
    primarykey
    data
    text
    <p>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</p> <p>.</p> <p><strong>Current:</strong></p> <p>Row1 Column1 | Row1 column2 | Row1 column3</p> <hr> <p>Row2 Column1 | Row2 column2 | Row2 column3</p> <hr> <p>Row3 Column1 | Row3 column2 | Row3 column3</p> <hr> <p>.</p> <p><strong>Required:</strong></p> <p>Row1 Column1 | Row1 column2</p> <p>Row1 column3 |</p> <hr> <p>Row2 Column1 | Row2 column2 </p> <p>Row2 column3 |</p> <hr> <p>Row3 Column1 | Row3 column2 </p> <p>Row3 column3 |</p> <hr> <p>Code</p> <pre><code>dishTable = $('#dishtable').dataTable({ //"bJQueryUI": true, // "sPaginationType": "full_numbers", // "iDisplayLength": 7, "sScrollY": "80%", "sScrollX": "100%", "bPaginate": false, "sAjaxSource": "amsrequestprocessor?action=amsretrieveorder&amp;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"} ] }); } </code></pre> <p>HTML:</p> <pre><code>&lt;table id="dishtable" class="display"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th class="sno"&gt;SNo&lt;/th&gt; &lt;th class="d_name"&gt;Name&lt;/th&gt; &lt;th&gt;List-Price&lt;/th&gt; &lt;th&gt;Bill-Price&lt;/th&gt; &lt;th&gt;Qty&lt;/th&gt; &lt;!-- &lt;th&gt;State&lt;/th&gt; --&gt; &lt;th&gt;Total&lt;/th&gt; &lt;th&gt;Customizations&lt;/th&gt; &lt;th width=16px height=16px&gt;&lt;/th&gt; &lt;th width=16px height=16px&gt;&lt;/th&gt; &lt;th class="rowId"&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. UStakrishna
    1. UStakrishna
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to display data in two rows instead of the default one row using JQuery Datatables?
      1. UStakrishna
      1. VTFavorite
    1. COOK, so that's your table structure, now where's the javascript?
      singulars
      1. POHow to display data in two rows instead of the default one row using JQuery Datatables?
      1. USBeetroot-Beetroot
    2. COI have put the relevant datatables code above.. pls let me know if you need more information
      singulars
      1. POHow to display data in two rows instead of the default one row using JQuery Datatables?
      1. UStakrishna
    3. COTwo 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`.
      singulars
      1. POHow to display data in two rows instead of the default one row using JQuery Datatables?
      1. USBeetroot-Beetroot
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload