library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-12-05 05:04:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Docs: improve bootstrap example in column selector docs

Browse Source
This commit is contained in:
Herst 2015-06-08 19:21:35 +02:00
parent f4381c0c02
commit ebec6e9105
1 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/example-widget-column-selector.html
View File

@ -83,9 +83,6 @@
#popover-target input { #popover-target input {
margin-right: 5px; margin-right: 5px;
} }
.popover {
margin-top: -65px; /* adjust popover position */
}
</style> </style>
<script id="js">$(function() { <script id="js">$(function() {
@ -133,24 +130,23 @@
}); });
/*** Bootstrap popover demo ***/ /*** Bootstrap popover demo ***/
$('#popover')
.popover({
placement: 'right',
html: true, // required if content has HTML
content: '<div id="popover-target"></div>'
})
// bootstrap popover event triggered when the popover opens
.on('shown.bs.popover', function () {
// call this function to copy the column selection code into the popover
$.tablesorter.columnSelector.attachTo( $('.bootstrap-popup'), '#popover-target');
});
// initialize column selector using default settings // initialize column selector using default settings
// note: no container is defined! // note: no container is defined!
$(".bootstrap-popup").tablesorter({ $(".bootstrap-popup").tablesorter({
theme: 'blue', theme: 'blue',
widgets: ['zebra', 'columnSelector', 'stickyHeaders'] widgets: ['zebra', 'columnSelector', 'stickyHeaders']
}); });
// call this function to copy the column selection code into the popover
$.tablesorter.columnSelector.attachTo( $('.bootstrap-popup'), '#popover-target');
$('#popover')
.popover({
placement: 'right',
html: true, // required if content has HTML
content: $('#popover-target')
});
}); });
</script> </script>
@ -502,6 +498,10 @@
Select Column Select Column
</button> </button>
<div class="hidden">
<div id="popover-target"></div>
</div>
<table class="tablesorter bootstrap-popup"> <table class="tablesorter bootstrap-popup">
<thead> <thead>
<tr> <tr>
@ -577,6 +577,10 @@
Select Column Select Column
&lt;/button&gt; &lt;/button&gt;
&lt;div class=&quot;hidden&quot;&gt;
&lt;div id=&quot;popover-target&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;table class=&quot;tablesorter bootstrap-popup&quot;&gt; &lt;table class=&quot;tablesorter bootstrap-popup&quot;&gt;
&lt;thead&gt; &lt;thead&gt;
&lt;tr&gt; &lt;tr&gt;