To display the all the row which is checked

gautham_shetty · August 2015

I have developed a table with datable concept with json load data and checkbox at end of the each row in the table.
Want to display all the value for which checkbox is checked in table format.

Could you please guide here.

gautham_shetty · August 2015

<html>
<title>Product</title>

  <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
 <!--  //<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css"> -->

    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
    <script>
  var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800","0" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750","0" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000","0" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060","0" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700","0" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000","0"],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500","0" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900","0" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500","1" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900","0" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500","1" ],
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600","0" ]

];

$(document).ready(function() {
$('#example').DataTable( {
"scrollY": "200px",
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" },
{ title: "active"}

    ],
    'columnDefs': [{
     'targets': 7,
     'searchable':false,
     'orderable':false,
     'className': 'dt-body-center',
     'render': function (data, type, full, meta){
         return '<input type="checkbox" name="checking">';
     }
  }]

    } );

} );

  </script>
  <script>
  $(document).ready(function() {

  $('#example input[type="checkbox"]').click(function() {
  var total=$(this).find('input:checked').length;
alert(total);

})});
</script>
<script>
$(document).ready(function() {
var table = $('#example').DataTable();

$('#example tbody').on('click', 'tr', function () {
    var data = table.row( this ).data();
    alert( 'You clicked on '+data[0]+'\'s row' );
} );

} );
</script>
<style type="text/css">
.align{
left:60%;

 height: 10px;
width: 10px;
border:3px solid #8AC007;

padding: 10px;
}

}
a{
display: inline;
}
</style>
<body>
<a data-role="button" data-icon="plus" data-mini="true" id="save" class="align"></a

  x
    <!-- <div class="container"> 
    <table id="example" class="display" width="100%"></table>
    <!-- </div> -->

    <button id="save1" id="sayHello">Click</button>
    <th>Name</th>
            <th>Position</th>
            <th>Phone</th>
            <th>Office</th>
            <th>Extn</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>active</th>

    </body>
   </html>

gautham_shetty · August 2015

<html>
<title>Product</title>

  <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
 <!--  //<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css"> -->

    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
    <script>
  var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800","0" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750","0" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000","0" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060","0" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700","0" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000","0"],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500","0" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900","0" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500","1" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900","0" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500","1" ],
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600","0" ]

];

$(document).ready(function() {
$('#example').DataTable( {
"scrollY": "200px",
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" },
{ title: "active"}

    ],
    'columnDefs': [{
     'targets': 7,
     'searchable':false,
     'orderable':false,
     'className': 'dt-body-center',
     'render': function (data, type, full, meta){
         return '<input type="checkbox" name="checking">';
     }
  }]

    } );

} );

  </script>
  <script>
  $(document).ready(function() {

  $('#example input[type="checkbox"]').click(function() {
  var total=$(this).find('input:checked').length;
alert(total);

})});
</script>
<script>
$(document).ready(function() {
var table = $('#example').DataTable();

$('#example tbody').on('click', 'tr', function () {
    var data = table.row( this ).data();
    alert( 'You clicked on '+data[0]+'\'s row' );
} );

} );
</script>
<style type="text/css">
.align{
left:60%;

 height: 10px;
width: 10px;
border:3px solid #8AC007;

padding: 10px;
}

}
a{
display: inline;
}
</style>
<body>
<a data-role="button" data-icon="plus" data-mini="true" id="save" class="align"></a

  x
    <!-- <div class="container"> 
    <table id="example" class="display" width="100%"></table>
    <!-- </div> -->

    <button id="save1" id="sayHello">Click</button>
    <th>Name</th>
            <th>Position</th>
            <th>Phone</th>
            <th>Office</th>
            <th>Extn</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>active</th>

    </body>
   </html>

To display the all the row which is checked

To display the all the row which is checked

Answers

Howdy, Stranger!

Categories

DataTables

To display the all the row which is checked

To display the all the row which is checked

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables