JQuery DataTable

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

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="dataTable">
</div>

JavaScript

var orderdetailsurl = "https://www.jqwidgets.com/jquery-widgets-demo/demos/sampledata/orderdetails.xml";
 var ordersSource =
 {
     dataFields: [
         { name: 'OrderID', type: 'int' },
         { name: 'Freight', type: 'float' },
         { name: 'ShipName', type: 'string' },
         { name: 'ShipAddress', type: 'string' },
         { name: 'ShipCity', type: 'string' },
         { name: 'ShipCountry', type: 'string' },
         { name: 'ShippedDate', type: 'date' }
     ],
     root: "Orders",
     record: "Order",
     dataType: "xml",
     id: 'OrderID',
     url: orderdetailsurl,
 };
 var dataAdapter = new $.jqx.dataAdapter(ordersSource);

 $("#dataTable").jqxDataTable(
 {
     width: 800,
     source: dataAdapter,
     pageable: true,
     altRows: true,
     // called when jqxDataTable is going to be rendered.
     rendering: function()
     {
         // destroys all buttons.
         if ($(".editButtons").length > 0) {
             $(".editButtons").jqxButton('destroy');
         }
         if ($(".cancelButtons").length > 0) {
             $(".cancelButtons").jqxButton('destroy');
         }
     },
     // called when jqxDataTable is rendered.
     rendered: function () {
         if ($(".editButtons").length > 0) {
             $(".editButtons").jqxButton();
             
             var editClick = function (event) {
                 //invoke your own edit form
                 console.log(event.target.getAttribute('data-row'));
             }
             $(".editButtons").on('click', function (event) {
                 editClick(event);
             });                 
         }
     },
     pagerButtonsCount: 8,
     columns: [
       { text: 'Order ID', editable: false, dataField: 'OrderID', width: 200 },
       { text: 'Freight', dataField: 'Freight', cellsFormat: 'f2', cellsAlign: 'right', align: 'right', width: 200 },
       { text: 'Ship Country', dataField: 'ShipCountry', width: 150 },
       { text: 'Shipped Date', dataField:...