jQuery Plugin To Create Gmail-style Starred Table Rows - starmyrows.js

starmyrows.js is a lightweight jQuery plugin that adds  'Starred' and 'Not starred' bookmarking indicators to table rows as you seen in Google Gmail. The plugin uses Bootstrap's Glyphicons for star symbols and store the selection in the cookies.

How to use it:

1. Place the jQuery starmyrows.js after loading jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery-starmyrows.js"></script>

2. Load the required Bootstrap Glyphicons CSS in the head section of the document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">

3. Add unique IDs to tables rows using data-id attribute.

<table id="demo" class="table table-striped">
<thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr data-id="1">
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  </tr>
  <tr data-id="2">
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr data-id="3">
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
</tbody>
</table>

4. Retrieve the ID within a table row.

var getMyId = function (row) {
    return row.data('id').toString();
}

5. Initialize the plugin.

$('#demo').starMyRows({
  getId: getMyId
});

6. Configuration options.

$('#demo').starMyRows({

  // star color
  color: 'black',

  // enable multi select
  multiselect : false,

  // save state to cookies
  saveState: true,

  // cookie name
  cookieName: 'starMyRows',

  // cookie expire time
  cookieExpiresInDays: 50,

  // disable hover interaction
  disableHover: false,

  // get ID
  getId: function() { return 0; },

  // CSS class for stars
  starClassName: 'star',

  // CSS class on mouse hover
  mouseoverClass: 'mouseover'   
  
});

---

This awesome jQuery plugin is developed by benoitmarineau. For more Advanced Usages, please check the demo page or visit the official website.