select all checkbox pagination help required...

Question

Hi,

I currently have a report with pagination, that displays 10 records Per page.

Within this report, I also have a checkbox column for every record. Based on this,

I want to incorporate a "Check All" feature, so based on my scenario which displays 10 records, when I press the "Check All" checkbox, I would like to check all the visible records(10 at a time) in that page(pageno=3) and after deleting those 10 records, the page should be redirected to the same page(filename.php) with same page number(pageno=3).

www.mysite.com/filename.php?pageno=3

Plz... need help in this.

Regards, Adithya.B [email protected]

Answer 1

This could be solved using Javascript. How do you define the names of the checkboxes?

You could do a for loop to change the status of all checkboxes that are shown at the moment.

If you're using a javascript toolkit/framework like jQuery this is very easy. For instance you could give the class .page-[NUM] to all the checkboxes on a page and then use:

$(".page-[NUM]").each(function()
{
this.checked = checked_status;
});

Or if you use the same name for each checkbox on a page, try:

$("input[@name=thename]").each(function()
{
this.checked = checked_status;
});

where "thename" would be the name of your checkboxes on that page.

Answer 2

Using some framework like jQuery will make your life a lot easier. Suppose following is structure of your records:

<table id="report">
    <tr><td> <input type="checkbox" id="tr1" /></td><td>..</td><td>...</td></tr>
    <tr><td> <input type="checkbox" id="tr2" /></td><td>..</td><td>...</td></tr>
    <tr><td> <input type="checkbox" id="tr3" /></td><td>..</td><td>...</td></tr>
    <tr><td> <input type="checkbox" id="tr4" /></td><td>..</td><td>...</td></tr>
    <tr><td> <input type="checkbox" id="tr5" /></td><td>..</td><td>...</td></tr>
</table>

<input type="checkbox" id="chkAll"/> Select All.

The following code (using jquery) will do the needful:

<script type="text/javascript">
    $(document).ready(function(){
        $("#chkAll").change(function(){
            if($("#chkAll").is(":checked")){
                $("#report tr td:first-child").find("input:checkbox")
                        .attr("checked","checked");
            }else{
                $("#report tr td:first-child").find("input:checkbox")
                       .attr("checked","");
            }
        });
    });
</script>

EDIT:- based on your code, try replacing your *boxes_checkall* function with this code;

function boxes_checkall(a,b) { var cbs=a.getElementsByTagName('input');

        for(var i=0;i<cbs.length;i++)
        {
           if(cbs[i].type.toLowerCase()=='checkbox')
           {
               cbs[i].checked = b==1;
           }
        }
   }
</script>