CodePaste Logo
New Snippet New Snippet Recent Snippets Recent Snippets My Snippets My Snippets Web Code Search Snippets Search
Sign inor Register
Language: HTML

Table controls with jquery position

197 Views
Copy Code Show/Hide Line Numbers
   1:  <div id="tableframe" style="width: 80%; padding: 120px;">
   2:      <%var customers = (List<Customer>)ViewData["customers"]; %>
   3:      
   4:      <%=Html.Grid(customers).Columns(columns => {
   5:              columns.For(x => x.CustomerID).Named("ID");
   6:              columns.For(x => x.ContactName).Named("Name");
   7:              columns.For(x => x.CompanyName).Named("Company");
   8:              columns.For(x => x.Country).Named("Country");
   9:          }).Attributes(new Dictionary<string, object>() { { "id", "customers" },{"width","100%"} }) %>
  10:      <div id="leftpos" class="pos" style="width: 70px; height: 20px; position: absolute;
  11:          display: block; right: 0; bottom: 0; text-align: center; display: none;">
  12:          <a href="">(edit)</a>
  13:      </div>
  14:      <div id="rightpos" class="pos" style="width: 70px; height: 20px; position: absolute;
  15:          display: block; right: 0; bottom: 0; text-align: center; display: none;">
  16:          <a href="">(del)</a>
  17:      </div>
  18:  </div>
  19:   
  20:  <script type="text/javascript"> 
  21:      var oCustTable;
  22:   
  23:      $(function() {
  24:          var customers = $('#customers');
  25:          var oCustTable = customers.dataTable({
  26:              "bJQueryUI": true,
  27:              "sPaginationType": "full_numbers" });
  28:          
  29:          $("#tableframe").bind("mouseleave", function() { $(".pos").hide(); });
  30:          $("tbody>tr").hover(
  31:                  function() {
  32:                      $(".pos").show();
  33:                      $('#leftpos>a').attr("href", "javascript:alert('" + $(this).children('td:eq(0)').text() + "');");
  34:   
  35:                      $('#leftpos').position({
  36:                          of: $($(this)),
  37:                          my: 'right center',
  38:                          at: 'left center',
  39:                          offset: ''
  40:                      });
  41:                      $('#rightpos').position({
  42:                          of: $($(this)),
  43:                          my: 'left center',
  44:                          at: 'right center',
  45:                          offset: ''
  46:                      });
  47:   
  48:                  },
  49:                  function() {
  50:   
  51:                  }
  52:                  );
  53:   
  54:      });
  55:              
  56:  </script>
  57:   
  58:   
by Rob
  March 26, 2010 @ 1:11pm

Add a comment


Report Abuse
brought to you by:
West Wind Techologies



If you find this site useful and use it frequently please consider making a donation to support this free service.
Donate