Datatable - Javascript for all rows

Datatable - Javascript for all rows

theunknown1theunknown1 Posts: 1Questions: 1Answers: 0
<html>
<head>
<!-- DataTables -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">

<script>
function do_ok()
{
    document.getElementById("a3").checked = true;
}

function do_error()
{
    document.getElementById("a12").checked = true;
}
</script>
</head>
<body>
<table id="example" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Product</th>
            <th>Include</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A01</td>
            <td><input type="checkbox" id="a1" value="4" /></td>
        </tr>
        <tr>
            <td>A02</td>
            <td><input type="checkbox" id="a2" value="25" /></td>
        </tr>
        <tr>
            <td>A03</td>
            <td><input type="checkbox" id="a3" value="100" /></td>
        </tr>
        <tr>
            <td>A04</td>
            <td><input type="checkbox" id="a4" value="99" /></td>
        </tr>
        <tr>
            <td>A05</td>
            <td><input type="checkbox" id="a5" value="88" /></td>
        </tr>
        <tr>
            <td>A06</td>
            <td><input type="checkbox" id="a6" value="38" /></td>
        </tr>
        <tr>
            <td>A07</td>
            <td><input type="checkbox" id="a7" value="57" /></td>
        </tr>
        <tr>
            <td>A08</td>
            <td><input type="checkbox" id="a8" value="46" /></td>
        </tr>
        <tr>
            <td>A09</td>
            <td><input type="checkbox" id="a9" value="42" /></td>
        </tr>
        <tr>
            <td>A10</td>
            <td><input type="checkbox" id="a10" value="28" /></td>
        </tr>
        <tr>
            <td>A11</td>
            <td><input type="checkbox" id="a11" value="43" /></td>
        </tr>
        <tr>
            <td>A12</td>
            <td><input type="checkbox" id="a12" value="125" /></td>
        </tr>
    </tbody>
</table>

<button onclick="do_ok()">Click Me(OK)</button>
<button onclick="do_error()">Click Me(Row 12)</button>
<!-- DataTables -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function() {
    $('#example').DataTable();
} );
</script>
</body>
</html>

Unless I shows above 25 rows per page, else when I click button 'Click Me(Row 12)', javascript error occurs since the table shows only 10 rows per page by default.

Any idea to tick row 12's checkbox without edit maximum rows per page? I have 5000+ rows in actual, I don't want show them all to make the javascript work.

Thank you for your time.

This discussion has been closed.