[英]How to refresh data-table on click & change the row background color
I'm trying to change the background color of row on click on button, without page reload. 我试图更改单击按钮时行的背景颜色,而无需重新加载页面。 Here is my code, pls let me know what is wrong in my code.
这是我的代码,请让我知道我的代码有什么问题。 I've try this but i'm not able to do this without page reload.
我已经尝试过了,但是如果不重新加载页面就无法做到这一点。 Can anyone help me in this.
谁能帮我这个忙。
$.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');
}
}
});
}
})
You have to write click event when Document Object Model (DOM) is ready. 当文档对象模型(DOM)准备就绪时,您必须编写单击事件。
Just do it. 去做就对了。
function addClickEvent() {
$(document).on('click', 'btn_selector', function () {
$(this).closest('tr').css("background-color", "#bbf6c5");
});
$(function () {
addClickEvent();
});
}
See, I have done this at my end. 看,我已经做到了。
Follow this step: 请按照以下步骤操作:
(1) routes (1)路线
Route::group(['prefix' => 'example'], function () {
Route::get('', 'ExampleController@view');
Route::get('get_table_data', 'ExampleController@get_table_data');
});
(2) controller (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) view (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 (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");
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.