Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>DataTabel W Checkbox</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
​
</head>
<body>
    <table class="display" id="example"></table>
    <label>Total</label>
    <input type="text" id="total" class="form-control" readonly value="0.0" />
</body>
</html>
 
​
        $(document).ready(function () {
​
            // Add function for summing salaries for rows that are checked
            $.fn.dataTable.Api.register('sum()', function () {
                var dtData = this;
                var total = 0;
                $.each(dtData, function (i, it) {
                    if (it.isChecked) {
                        var a = parseFloat(it.salary.replace("$", "").replace(",", ""));
                        total += a;
                    }
                });
                $("#total").val(total);
            });
​
            // Takes the dataset below and adds a value to track the isChecked status for the row.
            $.each(dataSet, function (i, it) { it.isChecked = false; });
​
            // Table definition
            var dtapi = $('#example').DataTable({
                data: dataSet,
                pageLength: 3,
​
                // We have the option of invalidating and redrawing the table on each checkox change or
                // as I did, use the drawCallback to set the checkbox to match the row data 
                "drawCallback": function (settings) {
                    // not important on first draw so not worried about dtapi being defined on table initialization
                    if (dtapi) {
                        var visibleRows = $("td.cbcell").closest("tr");
                        visibleRows.each(function (i, item) {
                            $("td.cbcell input", item).prop("checked", dtapi.rows(item).data()[0].isChecked);
                        });
                    }
                },
                // this is the default but note that the drawCallback will not be called on each page change if set to true.
                "deferRender": false,
                "columnDefs": [],
                "order": [1],
                "columns": [
                    {
                        "data": "isChecked",
                        // adding the class name just to make finding the checkbox cells eaiser
                        "class": "cbcell",
                        "orderable": false,
                        // Put the checkbox in the title bar
                        "title": "<input type='checkbox' />",
                        // puts the checkbox in each row
                        "render": function (dataItem) {
                            if (dataItem)
                                return "<input checked type='checkbox'/>";
                            else
                                return "<input type='checkbox'/>";
                        }
                    },
                    // rest of the columns
                    { data: "first_name", title: "First Name" },
                    { data: "last_name", title: "Last Name" },
                    { data: "position", title: "Position" },
                    { data: "office", title: "Office" },
                    { data: "start_date", title: "Start date" },
                    { data: "salary", title: "Salary" }
                ]
            });
​
            // This is the event handler for the check all checkbox
            $("th input[type=checkbox]").on("click", function () {
                var isChecked = this.checked;
                var ld = $('#example').DataTable().rows().data();
                $.each(ld, function (i, item) {
                    item.isChecked = isChecked;
                });
                $(".cbcell input").prop("checked", isChecked);
                dtapi.data().sum();
            });
​
            // event handler for individual rows
            $("#example").on("click", "td input[type=checkbox]", function () {
                var isChecked = this.checked;
​
                // set the data item associated with the row to match the checkbox
                var dtRow = dtapi.rows($(this).closest("tr"));
                dtRow.data()[0].isChecked = isChecked;
​
                // determine if the over all checkbox should be checked or unchecked
                if (!isChecked) {
                    // if one is unchecked, then checkall cannot be checked
                    $("th input[type=checkbox]").prop("checked", false);
                }
                else {
                    $("th input[type=checkbox]").prop("checked", true);
                    $.each(dtapi.data(), function (i, item) {
                        if (!item.isChecked) {
                            $("th input[type=checkbox]").prop("checked", false);
                            return false;
                        }
                    });
                }
​
                dtapi.data().sum();
            });
​
​
        });
​
        // DataTable data set used
        var dataSet = [
        {
            "first_name": "Airi",
            "last_name": "Satou",
            "position": "Accountant",
            "office": "Tokyo",
            "start_date": "28th Nov 08",
            "salary": "$162,700"
        },
        {
            "first_name": "Angelica",
            "last_name": "Ramos",
            "position": "Chief Executive Officer (CEO)",
            "office": "London",
            "start_date": "9th Oct 09",
            "salary": "$1,200,000"
        },
        {
            "first_name": "Ashton",
            "last_name": "Cox",
            "position": "Junior Technical Author",
            "office": "San Francisco",
            "start_date": "12th Jan 09",
            "salary": "$86,000"
        },
        {
            "first_name": "Bradley",
            "last_name": "Greer",
            "position": "Software Engineer",
            "office": "London",
            "start_date": "13th Oct 12",
            "salary": "$132,000"
        },
        {
            "first_name": "Brenden",
            "last_name": "Wagner",
            "position": "Software Engineer",
            "office": "San Francisco",
            "start_date": "7th Jun 11",
            "salary": "$206,850"
        },
        {
            "first_name": "Brielle",
            "last_name": "Williamson",
            "position": "Integration Specialist",
            "office": "New York",
            "start_date": "2nd Dec 12",
            "salary": "$372,000"
        },
        {
            "first_name": "Bruno",
            "last_name": "Nash",
            "position": "Software Engineer",
            "office": "London",
            "start_date": "3rd May 11",
            "salary": "$163,500"
        },
        {
            "first_name": "Caesar",
            "last_name": "Vance",
            "position": "Pre-Sales Support",
            "office": "New York",
            "start_date": "12th Dec 11",
            "salary": "$106,450"
        },
        {
            "first_name": "Cara",
            "last_name": "Stevens",
            "position": "Sales Assistant",
            "office": "New York",
            "start_date": "6th Dec 11",
            "salary": "$145,600"
        },
        {
            "first_name": "Cedric",
            "last_name": "Kelly",
            "position": "Senior Javascript Developer",
            "office": "Edinburgh",
            "start_date": "29th Mar 12",
            "salary": "$433,060"
        }
        ];
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
bindridpro
0viewers