Checked Checkboxes by passed number using jquery

I have created table using datatables. Above that table I have added filter for Top "n" Routes by Annual Volume. Annual Volume is the column in table. "n" is the number that should be entered by user.

Like mentioned in the image:

Html table code:

<div class="table-responsive">
              <table class="table dataTable table-striped table-bordered" id="routeData">
                <thead class="thead-dark">
                  <tr>
                    <th></th>
                    <th>OPCO</th>
                    <th>Route ID</th>
                    <th>Origin</th>
                    <th>Destination</th>
                    <th>Product Type</th>
                    <th>Annual Volume</th>
                    <th>Freight Cost/t</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {% for d in route_obj %}
                  <tr id="{{d.id}}">
                    <td>{{d.id}}</td>
                    <td>{{d.opco__opco_name}}</td>
                    <td>{{d.routeid}}</td>
                    <td>{{d.source}}</td>
                    <td>{{d.destination}}</td>
                    <td>{{d.product_id_id__product_name}}</td>
                    <td>{{d.annualVolume}}</td>
                    <td>{{d.freightCost}}</td> 
                    <td> 
                      <i class='fa fa-edit editBtn' style="cursor: pointer;"></i>
                      <i class='fa fa-trash pl-3 deleteBtn' style="cursor: pointer;"></i>
                     </td>
                    
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>

jquery datatable code:

var table = $("#routeData").DataTable({
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true
            }
         }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[1, 'asc']],
      fixedColumns:   {
            leftColumns: 1,
            rightColumns: 1
        }
      
    });

Code for filer of Top "n" Routes By Annual Volume:

<div class="row">
  <div class="col">
    
    <div class="input-group mb-3">
      <span style="padding: 4px 10px ;">Top</span>
      <input type="text" id="filterByVolumeAddOne" class="form-control" style="max-width: 40px; padding: 1px;" aria-describedby="basic-addon1">
        <div class="input-group-prepend">
        <span class="input-group-text" id="filterByVolume" style="background-color: #2980b9; color: aliceblue; padding: 6px; cursor: pointer;"><i class="fa fa-arrow-right"></i></span>
      
      </div>
      <span style="padding: 4px 0px 0px 11px;">Route By Annual Volume |</span>
    </div>
  </div>
</div>

I'm getting the rows by number entered by user. like mentioned in the image:

Code for show entries by number entered in filter by user:

$("#filterByVolume").on('click', function() {
      count = $("#filterByVolumeAddOne").val() // Get number enter by user
      table.order([6, 'desc']).draw(); // Sort the table by volume in descending order
      table.page.len(count).draw(); // Display only the top rows
    });

Now I want to select checkboxes which are present in the table by the number. it means if user has entered Top 15 Routes By Annual Volume then I have to select checkbox of 15 rows.

In the image I have entered 4 Routes filter so select checkbox of 4 rows.

How do I select checkbox by the number entered by user?

jsFiddle Example: https://jsfiddle.net/q946hn2g/2/

Solution

I tried to do this using their API but doesn't seem to be possible, so I used jquery clicks 😅.

Check if this suits your needs, changed lines has 🟥 red square

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css" />
    <script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>

    <link
      rel="stylesheet"
      href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/css/dataTables.checkboxes.css"
    />
    <script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/js/dataTables.checkboxes.min.js"></script>

    <script>
      $(document).ready(function () {
        var table = $("#example").DataTable({
          ajax: "https://gyrocode.github.io/files/jquery-datatables/arrays_id.json",
          columnDefs: [
            {
              targets: 0,
              checkboxes: {
                selectRow: true,
              },
            },
          ],
          select: {
            style: "multi",
          },
          order: [[1, "asc"]],
        });

        $("#filterByVolume").on("click", function () {
          $("td.dt-checkboxes-cell:has(input:checked)").click(); //🟥 unselect if there are any
          count = $("#filterByVolumeAddOne").val();
          table.order([6, "desc"]).draw();
          table.page.len(count).draw();
          $("td.dt-checkboxes-cell").click(); //🟥 click on all visible checkbox except the select all
        });
      });
    </script>

    <title>Document</title>
  </head>
  <body>
    <h5>
      Done : filtering Top "n" Records By Salary, getting the "n" number of records. <br />
      want : Now I want that "n" number of records to be selected (checked) after filtering.
    </h5>

    <div class="row">
      <div class="col">
        <lable> Top <input type="number" id="filterByVolumeAddOne" /> Records By Salary</lable>
        <button id="filterByVolume" type="submit">Filter</button>
      </div>
    </div>

    <br />
    <br />
    <table id="example" class="display" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th></th>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Extn</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th></th>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>
  </body>
</html>