Language: HTML
Table controls with jquery position
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:
Report Abuse
Subscribe
Discuss
What's new
What is it
New Snippet
Recent Snippets
My Snippets
Web Code
Search

