Sorting Columns w/jQuery?

Sorting Columns w/jQuery?

Hi,

I have a list of records from my database being displayed on this page. I want to be able to sort the columns.  Typically, I do this with an HTML table, but was wondering if there is a way I can setup the below code using jQuery to allow for the column headers to be sortable?  I have an icon to sort up and an icon to sort down.

My goal is to allow the user to sort the data without a page refresh.

  1. <div class="header">
  2. <ul>
  3.       <li style="width: 20%;">Customer Number <img src="images/iconSort.gif" /></li>
          <li style="width: 60%;">Customer Name <img src="images/iconSort.gif" /></li>
          <li style="width: 20%;">Number Products <img src="images/iconSort.gif" /></li>
      </ul>


  4. </div>
  5. <div id="customerList">
  6. <!-- This list is dynamic --->
  7. <ul>

  8.       <li style="width: 20%;">123</li>
          <li style="width: 60%;">AGR Company</li>
          <li style="width: 20%;">54</li>
      </ul>


  9. <ul>

  10.       <li style="width: 20%;">928</li>
          <li style="width: 60%;">Mike's Widgets</li>
          <li style="width: 20%;">333</li>
      </ul>


  11. </div>