JQuery DataTable

Set the altRows property of the jqxDataTable. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<table id="table" border="1">
    <thead>
        <tr>
            <th align="left">First Name</th>
            <th align="left">Last Name</th>
            <th align="left">Product</th>
            <th align="right">Price</th>
            <th align="right">Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ian</td>
            <td>Devling</td>
            <td>Espresso Truffle</td>
            <td>$1.75</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Nancy</td>
            <td>Wilson</td>
            <td>Cappuccino</td>
            <td>$5.00</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Cheryl</td>
            <td>Nodier</td>
            <td>Caffe Americano</td>
            <td>$2.50</td>
            <td>4</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Saavedra</td>
            <td>Caramel Latte</td>
            <td>$3.80</td>
            <td>11</td>
        </tr>
        <tr>
            <td>Guylene</td>
            <td>Bjorn</td>
            <td>Green Tea</td>
            <td>$1.50</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Andrew</td>
            <td>Burke</td>
            <td>Caffe Espresso</td>
            <td>$3.00</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Regina</td>
            <td>Murphy</td>
            <td>White Chocolate Mocha</td>
            <td>$3.60</td>
            <td>6</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td>Murphy</td>
            <td>Caramel Latte</td>
            <td>$3.80</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Petra</td>
            <td>Bein</td>
          ...

JavaScript

$("#table").jqxDataTable({
      altRows: true,
      sortable: true,
      theme: 'energyblue',
      columns: [{
          text: 'First Name',
          dataField: 'First Name',
          width: 100
      }, {
          text: 'Last Name',
          dataField: 'Last Name',
          width: 100
      }, {
          text: 'Product',
          dataField: 'Product',
          width: 180
      }, {
          text: 'Unit Price',
          dataField: 'Price',
          width: 90,
          align: 'right',
          cellsAlign: 'right',
          cellsFormat: 'c2'
      }, {
          text: 'Quantity',
          dataField: 'Quantity',
          width: 80,
          align: 'right',
          cellsAlign: 'right'
      }]
  });