SMW_DataTables & SPS_PageIterator MW Widget

Widget:DataTables_Form

<noinclude>
This [http://www.mediawiki.org/wiki/Extension:Widgets widget] is meant to be used with an instance of [http://www.datatables.net DataTables jQuery plugin] on the page and a form link created from the [http://www.mediawiki.org/wiki/Extension:Semantic_Page_Series Semantic Page Series] <nowiki>{{#serieslink:}}</nowiki> parser function to a page iterator.  The [https://github.com/mtyeh411/semantic_mediawiki-datatables Semantic MediaWiki DataTables result format] can be used as a DataTables instance. 

This widget adds multiple selection highlighting on the DataTable instance.  The values of the selected DataTable rows are used as inputs to the Semantic Page Series pagenames value for the Semantic Page Series page iterator.

Just add the following anywhere on the page where you have a DataTable and a SPS link
<pre>
{{#widget: DataTables Form | pagenames=<SPS page iterator pagenames value>}}
</pre>
</noinclude>

<includeonly>
<style type="text/css"> table tr.row_selected td { background-color: #B0BED9 !important; } </style>

<script type="text/javascript">
        // get selected row values
          function getSelectedCells() {
            var output = new Array();
            var selectedRows = new Array();
            var aTrs = window.oTable.fnGetNodes();
            for( var i=0 ; i<aTrs.length; i++) {
              if( $(aTrs[i]).hasClass('row_selected')) {
                selectedRows.push( aTrs[i] );
              }
            }
            for( var i=0; i<selectedRows.length; i++ ) {
              var val = selectedRows[i].cells[0].innerText || selectedRows[i].cells[0].textContent;
              output.push( val );
            }
            return output;
          }

      $(document).ready(function() {
          // row selection highlighting
          $('.dataTable tr').click( function() {
            if( $(this).hasClass('row_selected')) 
              $(this).removeClass('row_selected');
            else 
              $(this).addClass('row_selected');
          });

          // change values of form with defined input
          $('form').click(function() {
             var output = getSelectedCells();  
             $('form input[value="<!--{$pagenames|escape:'html'}-->"][name="pagenames"]' ).after('<input type="hidden" name="<!--{$pagenames|escape:'html'}-->" value="' + output + '">');
             $('form input[name="<!--{$pagenames|escape:'html'}-->"]').attr("value", output);
          });     
      });

</script>
</includeonly>