سؤال

Is it possible with datatables to sort on every other row instead of every row?

The table has two rows per customer. The first is the customer information and the second has comments about the customer.

<table id="datatable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Address</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123</td>
      <td>Mr. Sample I</td>
      <td>123 Somewhere Rd.</td>
      <td>A</td>
    </tr>
    <tr>
      <td colspan="4">
        This is information about the person that and is most relevant.
      </td>
    </tr>
    <tr>
      <td>456</td>
      <td>Mrs. Sample</td>
      <td>123 No Where Rd.</td>
      <td>B</td>
    </tr>
    <tr>
      <td colspan="4">
        This is information about the person that and is most relevant.
      </td>
    </tr>
    <tr>
      <td>458</td>
      <td>Mr. Bruce Wayne</td>
      <td>123 Bat Cave Rd.</td>
      <td>B</td>
    </tr>
    <tr>
      <td colspan="4">
        This is information about the person that and is most relevant.
      </td>
    </tr>
  </tbody>
</table>

My jQuery is defined as this.

$(document).ready(function(){
  $('#datatable').dataTable();
}); 
هل كانت مفيدة؟

المحلول

Not as you describe, but it sounds like you want something similar to the hidden row example provided by datatables.

This example shows a way to provide additional information by showing and hiding the additional information. The example page also provides a nice demo, but the relevant code from the example is posted below.

var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
    var aData = oTable.fnGetData( nTr );
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    sOut += '<tr><td>Rendering engine:</td><td>'+aData[2]+' '+aData[5]+'</td></tr>';
    sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
    sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
    sOut += '</table>';

    return sOut;
}

$(document).ready(function() {
    oTable = $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/details_col.php",
        "aoColumns": [
            { "sClass": "center", "bSortable": false },
            null,
            null,
            null,
            { "sClass": "center" },
            { "sClass": "center" }
        ],
        "aaSorting": [[1, 'asc']]
    } );

    $('#example tbody td img').live( 'click', function () {
        var nTr = $(this).parents('tr')[0];
        if ( oTable.fnIsOpen(nTr) )
        {
            /* This row is already open - close it */
            this.src = "../examples_support/details_open.png";
            oTable.fnClose( nTr );
        }
        else
        {
            /* Open this row */
            this.src = "../examples_support/details_close.png";
            oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
        }
    } );
} );
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top