Conversation List

Contents

Conversation list

Columns that are not commonly used to list conversations are commented out in the sample source code.

<table id="tblTickets">
  <colgroup>
    <col class="active">
    <col class="cbCol">
    <!-- <col class="convoType"> -->
    <col class="customer">
    <col class="attachment">
    <col class="subj">
    <col class="threadCount">
    <col class="owner">
    <col class="convoNum">
    <col class="lastUpd">
    <!-- <col class="relevance"> -->
  </colgroup>
  <thead id="tblHead">
    <tr>
      <th class="cbCol" colspan="2"><input type="checkbox" id="toggleAll" name="toggleAll"></th>
      <th class="customer">
        <a href="#" title="Sort" id="sortCustomer">Customer <b class="caret"></b></a>
      </th>
      <th class="attachment">&nbsp;</th>
      <th class="subj" colspan="2">
        <a href="#" title="Sort" id="sortSubject">Conversation <b class="caret"></b></a>
      </th>
      <th class="owner">
        <a href="#" title="Sort" id="sortAssigned">Assigned To <b class="caret"></b></a>
      </th>
      <th class="convoNum">
        <a href="#" title="Sort" id="sortNum">Number <b class="caret"></b></a>
      </th>
      <th class="lastUpd desc">
        <a href="#" title="Sort" id="sortDate">Last Updated <b class="caret"></b></a>
      </th>
      <!-- <th class="relevance">
        <a href="#" title="Sort" id="sortScore">Relevance <b class="caret"></b></a>
      </th>  -->
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td class="active"></td>
      <td class="cbCol"><input type="checkbox" id="t1" name="t1" value="12345678"></td>
      <!-- <td class="convoType"><a href="#"><i class="icon-email-sm"></i></a></td> -->
      <td class="customer">
        <a class="convoLink" href="#" title="View conversation">Michael Jordan</a>
      </td>
      <td class="attachment"><i class="icon-attach-1"></i></td>
      <td class="subj">
        <a href="#" title="View conversation">
          <span class="previewFade"></span>
          <p>My jumpshot</p>
          <p class="preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, officiis non velit nobis! Rem, esse quos repellat reiciendis rerum vero neque molestiae.</p>
        </a>
      </td>
      <td class="threadCount">
        <a href="#" title="View conversation"><span class="threads">3</span></a>
      </td>
      <td class="owner">
        <a href="#" title="View conversation">Larry Bird</a>
      </td>
      <td class="convoNum">
        <a href="#" title="View conversation">87900</a>
      </td>
      <td class="lastUpd">
        <a href="#" title="View conversation"><abbr title="2014-04-21T12:54:58.000Z">8:54am</abbr></a>
      </td>
      <!-- <td class="relevance">
        <span class="meter one" title="Score 0.04">
          <i class="icon-meter"></i>
          <i class="icon-meter"></i>
          <i class="icon-meter"></i>
          <i class="icon-meter"></i>
          <i class="icon-meter"></i>
        </span>
      </td> -->
    </tr>
    <tr class="closed">
      <td class="active"></td>
      <td class="cbCol"><input type="checkbox" id="t1" name="t1" value="12345678"></td>
      <td class="customer">
        <a class="convoLink" href="#" title="View conversation">Michael Jordan</a>
      </td>
      <!-- <td class="convoType"><a href="#"><i class="icon-email-sm"></i></a></td> -->
      <td class="attachment">&nbsp;</td>
      <td class="subj">
        <a href="#" title="View conversation">
          <span class="previewFade"></span>
          <p>My jumpshot</p>
          <p class="preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, officiis non velit nobis! Rem, esse quos repellat reiciendis rerum vero neque molestiae.</p>
        </a>
      </td>
      <td class="threadCount">
        <a href="#" title="View conversation"><span class="threads">3</span></a>
      </td>
      <td class="owner">
        <a href="#" title="View conversation">&nbsp;</a>
      </td>
      <td class="convoNum">
        <a href="#" title="View conversation">87900</a>
      </td>
      <td class="lastUpd">
        <a href="#" title="View conversation"><abbr title="2014-04-21T12:54:58.000Z">Apr 21</abbr></a>
      </td>
      <!-- <td class="relevance">
        <span class="meter one" title="Score 0.04">
          <i class="icon-meter"></i>
          <i class="icon-meter"></i>
          <i class="icon-meter"></i>
          <i class="icon-meter"></i>
          <i class="icon-meter"></i>
        </span>
      </td> -->
    </tr>
  </tbody>
  <tfoot id="tblFoot">
    <tr>
      <td class="totals" colspan="5">
        76 matching conversations
      </td>
      <td colspan="4">
        <div class="pager">
          <a href="#" class="first" title="First Page"><i class="icon-first"></i></a>
          <a href="#" class="prev" title="Previous Page (J)"><i class="icon-arrow-lt"></i></a>
          <a href="#" class="next" title="Next Page (K)"><i class="icon-arrow-rt"></i></a>
          <a href="#" class="last" title="Last Page"><i class="icon-last"></i></a>
        </div><!--/pager-->
      </td>
    </tr>
  </tfoot>
</table>

Bordered

<table id="tblTickets" class="table-bordered">
  ...
</table>