How do I pass parameters to javascript from each page dynamically

Question

The following code provides Remove capability on each of the list page (e.g. sample list page given below), of which only 3 variables (tableId, removeButtonId, headerCheckbox) vary in each page. How do I re-use this script across all pages, instead of defining this in each page. How do I pass parameters to this script from each page dynamically?

        <script type="text/javascript">
            var tableId = '#usersChildren\\:userList';
            var removeButtonId = '#usersChildren\\:removeUsers';
            var headerCheckbox = '#selectAll';

            jQuery(document).ready(function() {
                if (jQuery(tableId).find("input[type='checkbox']").length == 1) {
                    jQuery(headerCheckbox).hide();
                    jQuery(removeButtonId).hide();
                } else if(jQuery(tableId).find("input[type=checkbox]:checked").length == 0) {
                    jQuery(removeButtonId).hide();
                    jQuery(headerCheckbox).click(function() {
                        jQuery(tableId).find("input[type='checkbox']").attr('checked', jQuery(headerCheckbox).is(':checked'));
                    });
                }

                jQuery(tableId).find("input[type='checkbox']").each(function() {
                    if(jQuery(this).attr('id') != headerCheckbox) {
                        jQuery(this).click(function() {
                            if (jQuery(headerCheckbox).is(':checked')) {
                                if(jQuery(tableId).find("input[type=checkbox]:checked").length != 1) {
                                    jQuery(removeButtonId).show();
                                }
                            } else if(jQuery(tableId).find("input[type=checkbox]:checked").length > 0) {
                                jQuery(removeButtonId).show();
                            } else {
                                jQuery(removeButtonId).hide();
                            }
                        });
                    }
                });
            });
        </script>

Answer 1

Put this code in a script that is sourced from a script tag, on each template that needs it:

function bindRemoveButton(tableId, removeButtonId, headerCheckbox) {
  if (jQuery(tableId).find("input[type='checkbox']").length == 1) {
      jQuery(headerCheckbox).hide();
      jQuery(removeButtonId).hide();
  } else if(jQuery(tableId).find("input[type=checkbox]:checked").length == 0) {
      jQuery(removeButtonId).hide();
      jQuery(headerCheckbox).click(function() {
          jQuery(tableId).find("input[type='checkbox']").attr('checked', jQuery(headerCheckbox).is(':checked'));
      });
  }

  jQuery(tableId).find("input[type='checkbox']").each(function() {
      if(jQuery(this).attr('id') != headerCheckbox) {
          jQuery(this).click(function() {
              if (jQuery(headerCheckbox).is(':checked')) {
                  if(jQuery(tableId).find("input[type=checkbox]:checked").length != 1) {
                      jQuery(removeButtonId).show();
                  }
              } else if(jQuery(tableId).find("input[type=checkbox]:checked").length > 0) {
                  jQuery(removeButtonId).show();
              } else {
                  jQuery(removeButtonId).hide();
              }
          });
      }
  });
}

On each template that needs it do

<script type="text/javascript" src="remove.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    var tableId = '#usersChildren\\:userList';
    var removeButtonId = '#usersChildren\\:removeUsers';
    var headerCheckbox = '#selectAll';

    bindRemoveButton(tableId, removeButtonId, headerCheckbox);
  });
</script>

Now you can change the bindRemoveButton function in one place, and in each template you just have to change three variables.