Как обновить таблицу данных при клике и изменить цвет фона строки

Question

Я пытаюсь изменить цвет фона строки при нажатии на кнопку, без перезагрузки страницы.Вот мой код, пожалуйста, дайте мне знать, что не так в моем коде.Я пробовал это, но я не могу сделать это без перезагрузки страницы.Может ли кто-нибудь помочь мне в этом.

$.ajax({
    type: "GET",
    url: "API-Link",
    success: function (data) {
//Some code here

        $('#unmatched-driver tbody').on('click', '.btn_ok', function (e) {
            //location.reload(true);
            var data = oTable.row($(this).parents('tr')).data();
            var tripid = data[1];
            var OKflagid = ($(this).data("value"));
            $.ajax({
                type: "POST",
                url: "API-Link",
                dataType: 'json',
                dataSrc: ''
            });
            $(this).parents('tr').css("background-color", "#bbf6c5");
        });
        $('#unmatched-driver tbody').on('click', '.btn_nok', function (e) {
            //location.reload(true);
            var data = oTable.row($(this).parents('tr')).data();
            var tripid = data[1];
            var NOKflagid = ($(this).data("value"));
            $.ajax({
                type: "POST",
                url: "API-Link",
                dataType: 'json',
                dataSrc: ''
            });
            $(this).parents('tr').css("background-color", '#f6c1bb');
        });
        oTable = $('.trip_unmacthed').DataTable({
            "pageLength": 5,
            "ordering": false,
            "columnDefs": [{
                "targets": [11, 12, 13],
                "visible": false
                            }],
            rowCallback: function (row, data, index) {
                if (data[13] == "1") {
                    $('td', row).css('background-color', '#bbf6c5');
                } else if (data[13] == "2") {
                    $('td', row).css('background-color', '#f6c1bb');
                }
            }

        });
    } 
}) 

Answer 1

Вы должны написать событие щелчка, когда объектная модель документа (DOM) готова.

См. Это

Просто сделайте это.

function addClickEvent() {
   $(document).on('click', 'btn_selector', function () {
      $(this).closest('tr').css("background-color", "#bbf6c5");
});

$(function () {
   addClickEvent();
  });
}

Видите, я сделал это на своем конце.

Выполните этот шаг:

(1) маршруты

    Route::group(['prefix' => 'example'], function () {
        Route::get('', 'ExampleController@view');
        Route::get('get_table_data', 'ExampleController@get_table_data');
    });

(2) контроллер

    namespace App\Http\Controllers\User;

    use App\Http\Controllers\Controller;
    use DataTables;
    use App\Utility;

    class ExampleController extends Controller {

        public function view() {
            return view('pages.store_admin.example-table');
        }

        function get_table_data() {
            return DataTables::eloquent(Utility::query())->toJson();
        }

    }

(3) просмотр

    @extends('layouts.store_admin')
    @section('title','Example')
    @section('page-title','Example')
    @section('page-title-desc','')
    @section('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.15/datatables.min.css"/>
    @endsection

    @section('content')
    <div class="row">
        <div class="card">
            <div class="card-body"> 
                <div class="col-lg-12 col-md-12"> 
                    <div class="table-responsive">
                        <table class="table table-ordered" id="example_table" style="width: 100%">
                            <thead style="font-weight: bold;">
                                <tr>
                                    <td>ID</td>
                                    <td>Key</td>
                                    <td>Value</td>
                                    <td>Action</td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div> 
            </div> 
        </div> 
    </div> 

    @endsection

    @section('js')
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.15/datatables.min.js"></script>
    <script type="text/javascript">
    <?php
    $data_url = url('example/get_table_data');
    ?>
        window.data_url = '{{ $data_url }}';
    </script>
    <script type="text/javascript" src="{{ asset('js/store_admin/example-table.js') }}"></script>
    @endsection

(4) js

$(function () {
        addDataTable();
        addClickEvent();
    });

    function addDataTable() {

        window.example_table = $('#example_table').DataTable({
            processing: true,
            serverSide: true,
            targets: 0,
            stateSave: true,
            ajax: {
                url: window.data_url
            },
            columns: [
                {
                    data: 'id',
                    visible: false,
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'key',
                    orderable: true,
                    searchable: true
                },
                {
                    data: 'value',
                    orderable: true,
                    searchable: true
                },
                {
                    data: 'id',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function (data, type, row) {
                        return '<button class="btn btn-sm btn-danger change-red-color-btn">Red</button>'
                                + ' <button class="btn btn-sm btn-success change-green-color-btn">Green</button>';
                    }
                }
            ]
        });

    }

    function addClickEvent() {

        $(document).on('click', '.change-red-color-btn', function () {
            $(this).closest('tr').css("background-color", "red");
        });

        $(document).on('click', '.change-green-color-btn', function () {
            $(this).closest('tr').css("background-color", "green");
        });
    }