Advertisement
Guest User

jq dataTable jqui styling row issue

a guest
Oct 9th, 2014
193
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.87 KB | None | 0 0
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.  
  6. <title>DataTables jQuery UI example</title>
  7.  
  8. <!-- cd libs/styles
  9. <link rel="stylesheet" type="text/css" href="micis/styles.css">
  10. <link rel="stylesheet" type="text/css" href="../coins_core/css/vendor/jquery-ui-bootstrap/0.5/css/custom-theme/jquery-ui-1.10.0.custom.css">
  11. <link rel="stylesheet" type="text/css" href="../coins_core/js/vendor/dataTables/Plugins/integration/jqueryui/dataTables.jqueryui.css">
  12.  
  13. <script type="text/javascript" language="javascript" src="../coins_core/js/vendor/jquery/1.11.1/jquery-1.11.1.min.js"></script>
  14. <script type="text/javascript" language="javascript" src="../coins_core/js/vendor/jquery-ui/1.11.1/jquery-ui.min.js"></script>
  15. <script type="text/javascript" language="javascript" src="../coins_core/js/vendor/dataTables/1.10.2/media/js/jquery.dataTables.min.js"></script>
  16. <script type="text/javascript" language="javascript" src="../coins_core/js/vendor/dataTables/Plugins/integration/jqueryui/dataTables.jqueryui.js"></script>
  17. -->
  18.  
  19. <!-- dataTable libs/styles -->
  20. <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  21. <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/a5734b29083/integration/jqueryui/dataTables.jqueryui.css">
  22.  
  23. <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  24. <script type="text/javascript" language="javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
  25. <script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
  26. <script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/a5734b29083/integration/jqueryui/dataTables.jqueryui.js"></script>
  27.  
  28. <script type="text/javascript" charset="utf-8">
  29. $(document).ready(function() {
  30. $('#example').dataTable();
  31.  
  32. var tableCols = [
  33. {title: "Study", data: "label"},
  34. {title: "Sum Number", data: "diaryNum"},
  35. {title: "Other Number", data: "guapos"},
  36. {title: "Cats Name", data: "chimichanga"},
  37. {title: "Site", data: "sitelabel"},
  38. {title: "Study Status", data: "status"},
  39. {title: "secretNum", data: "secretNum", visible: false}
  40. ]
  41. var sampleData = [
  42. {
  43. "secretNum": "98",
  44. "label": "2l3as",
  45. "diaryNum": "1537",
  46. "guapos": "2324",
  47. "chimichanga": "asdfweee",
  48. "sitelabel": "bilboBaggins",
  49. "status": "Active"
  50. },
  51. {
  52. "secretNum": "90",
  53. "label": "asdf",
  54. "diaryNum": "k92",
  55. "guapos": "lk;j",
  56. "chimichanga": "908",
  57. "sitelabel": "bilboBaggins",
  58. "status": "jknl"
  59. },
  60. {
  61. "secretNum": "kljh",
  62. "label": "kjh",
  63. "diaryNum": "klj-3j33",
  64. "guapos": "0000",
  65. "chimichanga": "buzz lightyear",
  66. "sitelabel": "bilboBaggins",
  67. "status": "Expired"
  68. },
  69. {
  70. "secretNum": "090",
  71. "label": "balbbalb",
  72. "diaryNum": "25",
  73. "guapos": "122",
  74. "chimichanga": "ojimmy",
  75. "sitelabel": "bilboBaggins",
  76. "status": "Expired"
  77. },
  78. {
  79. "secretNum": "7140",
  80. "label": "whoaBetty",
  81. "diaryNum": "99881",
  82. "guapos": "023",
  83. "chimichanga": "rogers cat",
  84. "sitelabel": "bilboBaggins",
  85. "status": "Expired"
  86. },
  87. {
  88. "secretNum": "092",
  89. "label": "hemoglobin",
  90. "diaryNum": "92298",
  91. "guapos": "1119",
  92. "chimichanga": "grandma",
  93. "sitelabel": "bilboBaggins",
  94. "status": "Active"
  95. },
  96. {
  97. "secretNum": "2323",
  98. "label": "ur a turkey face",
  99. "diaryNum": "2623626",
  100. "guapos": "22322",
  101. "chimichanga": "cream n sugar",
  102. "sitelabel": "bilboBaggins",
  103. "status": "Expired"
  104. }
  105. ];
  106. jQuery('#testSampleDataTable')
  107. .dataTable({
  108. data: sampleData,
  109. columns: tableCols,
  110. bDestroy: true
  111. });
  112. });
  113. </script>
  114. </head>
  115. <body>
  116. <div class="container">
  117. <table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Salary</th></tr></thead><tbody><tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>$320,800</td></tr><tr><td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>$170,750</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>$86,000</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>$433,060</td></tr><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>$162,700</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>$372,000</td></tr><tr><td>Herrod Chandler</td><td>Sales Assistant</td><td>San Francisco</td><td>$137,500</td></tr><tr><td>Rhona Davidson</td><td>Integration Specialist</td><td>Tokyo</td><td>$327,900</td></tr><tr><td>Colleen Hurst</td><td>Javascript Developer</td><td>San Francisco</td><td>$205,500</td></tr><tr><td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>$103,600</td></tr><tr><td>Jena Gaines</td><td>Office Manager</td><td>London</td><td>$90,560</td></tr><tr><td>Quinn Flynn</td><td>Support Lead</td><td>Edinburgh</td><td>$342,000</td></tr><tr><td>Charde Marshall</td><td>Regional Director</td><td>San Francisco</td><td>$470,600</td></tr><tr><td>Haley Kennedy</td><td>Senior Marketing Designer</td><td>London</td><td>$313,500</td></tr><tr><td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td><td>$385,750</td></tr><tr><td>Michael Silva</td><td>Marketing Designer</td><td>London</td><td>$198,500</td></tr><tr><td>Paul Byrd</td><td>Chief Financial Officer (CFO)</td><td>New York</td><td>$725,000</td></tr><tr><td>Gloria Little</td><td>Systems Administrator</td><td>New York</td><td>$237,500</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>$132,000</td></tr><tr><td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td><td>$217,500</td></tr><tr><td>Jenette Caldwell</td><td>Development Lead</td><td>New York</td><td>$345,000</td></tr><tr><td>Yuri Berry</td><td>Chief Marketing Officer (CMO)</td><td>New York</td><td>$675,000</td></tr><tr><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>$106,450</td></tr><tr><td>Doris Wilder</td><td>Sales Assistant</td><td>Sidney</td><td>$85,600</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>$1,200,000</td></tr><tr><td>Gavin Joyce</td><td>Developer</td><td>Edinburgh</td><td>$92,575</td></tr><tr><td>Jennifer Chang</td><td>Regional Director</td><td>Singapore</td><td>$357,650</td></tr><tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>$206,850</td></tr><tr><td>Fiona Green</td><td>Chief Operating Officer (COO)</td><td>San Francisco</td><td>$850,000</td></tr><tr><td>Shou Itou</td><td>Regional Marketing</td><td>Tokyo</td><td>$163,000</td></tr><tr><td>Michelle House</td><td>Integration Specialist</td><td>Sidney</td><td>$95,400</td></tr><tr><td>Suki Burks</td><td>Developer</td><td>London</td><td>$114,500</td></tr><tr><td>Prescott Bartlett</td><td>Technical Author</td><td>London</td><td>$145,000</td></tr><tr><td>Gavin Cortez</td><td>Team Leader</td><td>San Francisco</td><td>$235,500</td></tr><tr><td>Martena Mccray</td><td>Post-Sales support</td><td>Edinburgh</td><td>$324,050</td></tr><tr><td>Unity Butler</td><td>Marketing Designer</td><td>San Francisco</td><td>$85,675</td></tr><tr><td>Howard Hatfield</td><td>Office Manager</td><td>San Francisco</td><td>$164,500</td></tr><tr><td>Hope Fuentes</td><td>Secretary</td><td>San Francisco</td><td>$109,850</td></tr><tr><td>Vivian Harrell</td><td>Financial Controller</td><td>San Francisco</td><td>$452,500</td></tr><tr><td>Timothy Mooney</td><td>Office Manager</td><td>London</td><td>$136,200</td></tr><tr><td>Jackson Bradshaw</td><td>Director</td><td>New York</td><td>$645,750</td></tr><tr><td>Olivia Liang</td><td>Support Engineer</td><td>Singapore</td><td>$234,500</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>$163,500</td></tr><tr><td>Sakura Yamamoto</td><td>Support Engineer</td><td>Tokyo</td><td>$139,575</td></tr><tr><td>Thor Walton</td><td>Developer</td><td>New York</td><td>$98,540</td></tr><tr><td>Finn Camacho</td><td>Support Engineer</td><td>San Francisco</td><td>$87,500</td></tr><tr><td>Serge Baldwin</td><td>Data Coordinator</td><td>Singapore</td><td>$138,575</td></tr><tr><td>Zenaida Frank</td><td>Software Engineer</td><td>New York</td><td>$125,250</td></tr><tr><td>Zorita Serrano</td><td>Software Engineer</td><td>San Francisco</td><td>$115,000</td></tr><tr><td>Jennifer Acosta</td><td>Junior Javascript Developer</td><td>Edinburgh</td><td>$75,650</td></tr><tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>$145,600</td></tr><tr><td>Hermione Butler</td><td>Regional Director</td><td>London</td><td>$356,250</td></tr><tr><td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>$103,500</td></tr><tr><td>Jonas Alexander</td><td>Developer</td><td>San Francisco</td><td>$86,500</td></tr><tr><td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>$183,000</td></tr><tr><td>Michael Bruce</td><td>Javascript Developer</td><td>Singapore</td><td>$183,000</td></tr><tr><td>Donna Snider</td><td>Customer Support</td><td>New York</td><td>$112,000</td></tr></tbody></table>
  118. <br/><br/>
  119. <table id="testSampleDataTable"></table>
  120. </div>
  121. </body>
  122. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement