1<table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0"> 2 <thead> 3 <tr> 4 <th class="nd_center-cell">Device Name</th> 5 <th class="nd_center-cell">Device IP</th> 6 <th class="nd_center-cell">Number of Ports</th> 7 <th class="nd_center-cell">Services</th> 8 <th class="nd_center-cell">Action</th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr> 13 <td class="nd_center-cell"><input data-form="add" name="dns" type="text"></td> 14 <td class="nd_center-cell"><input data-form="add" name="ip" type="text"></td> 15 <td class="nd_center-cell"><input data-form="add" name="ports" type="number" value="1"></td> 16 <td class="nd_center-cell"> 17 <span class="badge"> </span><span class="badge"> </span> 18 <a class="nd_layer-three-link" href="#" rel="tooltip" data-placement="bottom" data-offset="3" data-title="Enable Arpnip"><span class="badge">3</span></a><span class="badge"> </span><span class="badge"> </span><span class="badge"> </span><span class="badge"> </span> 19 <input data-form="add" name="layers" type="hidden" value="00000000"> 20 </td> 21 <td class="nd_center-cell"> 22 <button class="btn btn-small nd_adminbutton" name="add" type="submit"><i class="icon-plus-sign"></i> Add</button> 23 </td> 24 </tr> 25 [% SET count = 0 %] 26 [% WHILE (row = results.next) %] 27 [% SET count = count + 1 %] 28 <tr> 29 <td class="nd_center-cell"><a class="nd_linkcell" 30 href="[% uri_for('/device') | none %]?q=[% row.ip | uri %]">[% row.dns | html_entity %]</a></td> 31 <td class="nd_center-cell">[% row.ip | html_entity %]</td> 32 <td class="nd_center-cell"> 33 <input data-form="update" name="ports" type="number" value="[% row.port_count | html_entity %]"> 34 </td> 35 <td class="nd_center-cell"> 36 <span class="badge"> </span><span class="badge"> </span> 37 <a class="nd_layer-three-link" href="#" rel="tooltip" data-placement="bottom" data-offset="3" data-title="Enable Arpnip"><span class="badge[% ' badge-success' IF row.layers.substr(5,1) %]">3</span></a><span class="badge"> </span><span class="badge"> </span><span class="badge"> </span><span class="badge"> </span> 38 <input data-form="update" name="layers" type="hidden" value="[% row.layers | html_entity %]"> 39 </td> 40 <td class="nd_center-cell"> 41 <input data-form="update" name="dns" type="hidden" value="[% row.dns | html_entity %]"> 42 <input data-form="update" name="ip" type="hidden" value="[% row.ip | html_entity %]"> 43 <button class="btn nd_adminbutton" name="update" type="submit"><i class="icon-save text-warning"></i></button> 44 45 <button class="btn" data-toggle="modal" 46 data-target="#nd_devdel-[% count | html_entity %]" type="button"><i class="icon-trash text-error"></i></button> 47 48 <div id="nd_devdel-[% count | html_entity %]" class="nd_modal nd_deep-horizon modal hide fade" tabindex="-1" 49 role="dialog" aria-labelledby="nd_devdel-label-[% count | html_entity %]" aria-hidden="true"> 50 <div class="modal-header"> 51 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 52 <h3 id="nd_devdel-label-[% count | html_entity %]">Are you sure?</h3> 53 </div> 54 <div class="modal-body"> 55 <blockquote> 56 <p class="text-info"> 57 Pseudo-device "[% row.dns | html_entity %] / [% row.ip | html_entity %]" will be deleted.</p> 58 </blockquote> 59 <input data-form="delete" name="device" type="hidden" value="[% row.ip | html_entity %]"> 60 </div> 61 <div class="modal-footer"> 62 <button class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button> 63 <button class="btn btn-danger nd_adminbutton" name="delete" data-dismiss="modal">Confirm</button> 64 </div> 65 </div> 66 </td> 67 </tr> 68 [% END %] 69 </tbody> 70</table> 71 72<script> 73$(document).ready(function() { 74 $('#data-table').dataTable({ 75 "columnDefs": [ { 76 "targets": [ 2, 3 ], 77 "orderable": false, 78 "searchable": false 79 } ], 80[% INCLUDE 'ajax/datatabledefaults.tt' -%] 81 } ); 82 $('.nd_layer-three-link').click(function() { 83 var badge = $(this).children('span').first(); 84 var layers = $(this).parent().children('input').first(); 85 $(badge).toggleClass('badge-success'); 86 if ($(badge).hasClass('badge-success')) { 87 $(layers).attr('value', '00000100'); 88 } 89 else { 90 $(layers).attr('value', '00000000'); 91 } 92 }); 93} ); 94</script> 95 96