Hide row on click of a button.

Abhi R · June 2017

Hello Guys,
I want to hide a row by id on click of a button.
How to do that?

allan · June 2017

Row hiding in DataTables is done via filtering. You would need to create a custom filter that would remove the rows you don't want to see.

Allan

Abhi R · June 2017

The problem is I have a delete button. on click of that it's deleting in the backend but in the table, it's not going its still will be there. it only reflects when I refresh the page. So I thought of hiding it. but I'm unable to do that .
So is there anything i can do? on deleting it shouldn't be there in the table.

bindrid · June 2017

@Abhi R

Use ajax, with the id, to go back to the server and delete the row. Once done, refresh the table and put the user back on the same page. The row should now be gone.

If you are getting all your data at once, use the ajax to delete the row in question,
Find and delete the row out of the json data then refresh the table with the changed json data.

I can construct an example but it would be tomorrow night at the earliest.

allan · June 2017

Use row().remove() to delete the row from the client-side DataTable if you no longer want it.

Allan

Abhi R · June 2017

bindrid sure. I will be waiting for it.

Thanks allan

bindrid · June 2017

This page is a fully function page in my dev environment.
User selects a single row, then clicks the delete button.
An ajax call in made. If the delete was successful, the web method returns the info on the id on the deleted employee.
At that time, the employee is removed from the table, leaving the user on the same page.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css " rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/colreorder/1.3.3/css/colReorder.dataTables.min.css" rel="stylesheet" type="text/css" />

    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>

    <script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
    <script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
    <script src="//cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            var table = $('#example').DataTable({
                dom: "lftBp",
                rowId: "employeeId",
                "columns": [
                    { "data": "name" },
                    { "data": "position" },
                    { "data": "office" },
                    { "data": "extn" },
                    { "data": "start_date" },
                    { "data": "salary" }
                ],
                "lengthMenu": [[10, 15, 25, 50, -1], [10, 15, 25, 50, "All"]],
                "pageLength": 15,
                "ajax": {

                    contentType: "application/json; charset=utf-8",
                    url: "wsService.asmx/GetDTDataUnserializedObject",
                    type: "Post",
                    data: function (dtParms) {
                        // notice dtParameters exactly matches the web service
                        return JSON.stringify({ dtParameters: dtParms });
                    },
                    // Data filter is a part of ajax and lets you look at the raw
                    dataFilter: function (res) {
                        var parsed = JSON.parse(res);
                        return JSON.stringify(parsed.d);
                    },
                    error: function (x, y) {
                        console.log(x);
                    }
                },
                select: "single",
                order: [[0, 'asc']],
                buttons: [{
                    text: "Delete", extend: "selected", action: function (e, dt, node, config) {
                        var rowData = dt.row(".selected").data();
                        runAjax(rowData.employeeId).done(function (response) {
                            if (response.employeeId == rowData.employeeId) {
                                // passing 'page' in draw keeps the datatable on the same page.
                                dt.row(".selected").remove().draw('page');
                            }
                        })
                    }
                }]
            });
        });
        // this ajax is done with a jquery deferred object
        // so that the logic above and be done in a couple of lines
        // using the deferred/promise/done logic.
        // It goes against a c# .net web method so this logic
        // would need to change to fit your server.
        function runAjax(rowid) {
            var deferred = new $.Deferred();
            $.ajax({
                url: "wsService.asmx/DeleteEmployee",
                type: "Post",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ employeeId: rowid }),
                success: function (response) {
                    deferred.resolve(response.d);
                },
                error: function (err) {
                    deferred.fail(null);
                    console.log(err);
                }
            });
            return deferred.promise();
        }


    </script>
</head>
<body>
    <table width="100%" class="display" id="example" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Phone</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>

        </thead>

    </table>
</body>
</html>

Abhi R · July 2017

Thanks, bindrid it helped a lot

Hide row on click of a button.

Hide row on click of a button.

Answers

Howdy, Stranger!

Categories

DataTables

Hide row on click of a button.

Hide row on click of a button.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables