multiselect table row checkbox using jquery

Question

I have a VF page with a datatable that is populated from a custom search. The datatable has a checkbox column so that the rows can be selected and processed.

I'm trying to implement a way for the user to select multiple rows using either shift+click, ctrl+click, or ctrl+a on the rows that would also select the checkboxes so multiple rows can be easily selected and processed.

I have jquery-3.3.1.min successfully loaded. I was trying to get the following plugin to work on the page: Multiselect Plugin

I was unable to get the plugin to work. I tried using jquery 1.11.1 as indicated in the article as well because I was getting a type error with 3.3.1 version. When trying to debug, I'm not getting anything back in the browser debug log.

Here is a portion of the VF page:

    <apex:page standardController="SalesOrder__c" extensions="EditAllLineItemsExt,SearchProducts" docType="html-5.0">
        <apex:form >
            <apex:includeScript value="{!URLFOR($Resource.Jquery_3_3_1_min, '/jquery-3.3.1.min.js')}"/>
            <apex:includeScript value="{!$Resource.JqueryMultiselect}"/>
            <apex:includeScript value="{!$Resource.VF_EditAllLineItems}"/>

            // additional code moved for brevity..
            // page block code below that displays the search results that I want to implement multi-select...

            <apex:pageBlock id="pbSearch">
                <apex:pageBlockSection columns="1">
                    <apex:pageBlockTable value="{!results}" var="result" id="searchTable">
                        <apex:column headervalue="Action">
                            <apex:inputcheckbox value="{!result.selected}">
                                <apex:actionSupport event="onclick" action="{!getSelected}" reRender="btnAddProducts" />
                            </apex:inputcheckbox>
                        </apex:column>
                        <apex:column headerValue="Product SKU">
                            <apex:outputField value="{!result.product.Name}" />       
                        </apex:column>
                        <apex:column headerValue="{!dynamicColumnHeader1}">
                            <apex:outputPanel rendered="{!If(dynamicColumnHeader1 = 'Manufacturer', true, false)}">
                                <apex:outputField value="{!result.product.Manufacturer__c}" /> 
                            </apex:outputPanel>
                            <apex:outputPanel rendered="{!If(dynamicColumnHeader1 = 'Description', true, false)}">
                                <apex:outputField value="{!result.product.Description}" /> 
                            </apex:outputPanel>      
                        </apex:column>
                        <apex:column headerValue="{!dynamicColumnHeader2}">
                            <apex:outputPanel rendered="{!If(dynamicColumnHeader2 = 'Style Number', true, false)}">
                                <apex:outputField value="{!result.product.Style_Number__c}" /> 
                            </apex:outputPanel>
                            <apex:outputPanel rendered="{!If(dynamicColumnHeader2 = 'Product Family', true, false)}">
                                <apex:outputField value="{!result.product.Family}" />
                            </apex:outputPanel>    
                        </apex:column>
                        <apex:column headerValue="Color">
                            <apex:outputField value="{!result.product.Color__c}" />     
                        </apex:column>
                        <apex:column headerValue="Size">
                            <apex:outputField value="{!result.product.Size__c}" />     
                        </apex:column>
                        <apex:column headerValue="Product Name">
                            <apex:outputField value="{!result.product.Product_Name__c}" />     
                        </apex:column>
                        <apex:column headerValue="Tag Style">
                            <apex:outputField value="{!result.product.Tag_Style__c}" />     
                        </apex:column>
                    </apex:pageBlockTable>    
                </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:form>
    </apex:page>

script code:

j$ = jQuery.noConflict();

j$(document).ready(function() {
    j$(function () {
        j$('[id*=searchTable]').multiSelect({
            selector: 'tbody tr',
            except: ['tbody']
        });
    })
});

Does anyone know of a plugin to accomplish what I'm trying? Or, my error with the implementation of the above plugin?

Answer 1

The Multiselect plugin which you are using seems to be deprecated. For example the plugin uses size() method which is deprecated in the latest versions of jQuery.

I found a code in a fiddle which has a solution to your problem. It uses pure JS to select the rows without any plugin.

I am including the Ctrl+A functionality to select the all rows in the table:

document.onkeydown = function(){
            if(window.event.ctrlKey && window.event.keyCode == 65){
                for (var i = 0; i <= trs.length; i++) {
                    trs[i].className = 'selected';
                }
            }
        }