Clicking on sort, removes data from datatable. Reactjs Javascript

Clicking on sort, removes data from datatable. Reactjs Javascript - javascript

I am using datatable in react. When i click on sorting (in tHead) it removes all data and says no data available in table
What i think here, is that tbody is being rendered before Datatable initialisation. Or something like that.
Here is my code in PasteBin
And here is some code of componentDidMount
componentDidMount(){
employessData = thisclass.props.data;
thisclass.setState({
stateReady: true
})
var self = this;
$('#mytableEmp').dataTable({
"columnDefs": [
{ "width": "20px", "targets": 0 }
],
"pagingType": "numbers",
"bAutoWidth": false,
"bDestroy": true,
"fnDrawCallback": function() {
self.forceUpdate();
}
});
$('#checkboxhead').removeAttr('area-sort').removeClass('sorting_asc');
$(".checkAllCBEmp").click(function () {
$('#mytableEmp tbody input[type="checkbox"]').prop('checked', this.checked);
});
$("#searchtabletb").on("keyup", function() {
var value = $(this).val();
value = value.toLowerCase();
console.log(value);
$("#mytableEmp tr").each(function(index) {
if (index != 0) {
var row = $(this);
var id = row.find("td").text();
id = id.toLowerCase();
if (id.indexOf(value) === -1) {
$(this).hide();
}
else {
$(this).show();
}
}
});
});
}
And here is code from render function.
render () {
return (
<table className="table table-stripped" id="mytableEmp">
<thead>
<tr className="table-head-row">
<th id="checkboxhead" className="firsttd">
<div className="round-cb">
<input type="checkbox" id="cb1_emp" className="checkAllCBEmp" />
<label htmlFor="cb1_emp"></label>
</div>
</th>
<th>Title</th>
<th>Type</th>
<th>Created on</th>
<th>From</th>
<th>To</th>
<th>Processed</th>
<th>Amount</th>
<th>Status</th>
<th id="detailarrowhead" className="lasttd"></th>
</tr>
</thead>
<tbody>
{
this.state.stateReady ?
employessData.map((heading, index) => {
return(<tr role="row" className="tablerow" key={index}>
<td className="firsttd">
<div className="round-cb">
<input type="checkbox" value="cb1" id={heading.userId} />
<label htmlFor={heading.userId}></label>
</div>
</td>
<td>
<div className="emp-avatar">
<img src={heading.profile_picture} />
</div>
<div className="emp-title-div">
<div className="emp-title">
<div>
{heading.name}
</div>
</div>
</div>
</td>
<td>c</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td>Texto 2</td>
<td><span className="badge badge-red">Rejected</span></td>
<td className="lasttd"><Link to="/emp-profile" className="table-details-btn" onClick={() => {this.addlocalid(heading.userId)}}>View User</Link></td>
</tr>)
})
:
""
}
/tbody>
</table>
)
}

The scope of employessData is weird, so it thisclass.
You will want to do this instead in render:
let employessData = this.props.data;
this.state.stateReady ?
employessData.map(...);
and then understand if/why this.props.data that this component receives is empty (which is not visible here).

I have resolved this issue for the time being.
I have added delay of 3 seconds in following function
setTimeout(function(){
$('#mytableEmp').dataTable({
"columnDefs": [
{ "width": "20px", "targets": 0 }
],
"pagingType": "numbers",
"bAutoWidth": false,
"bDestroy": true,
"fnDrawCallback": function() {
self.forceUpdate();
}
});
}, 3000);

Related

Datatables counter column won't order and search while it set to true in javascript

So, I have this table
<table class="table table-bordered" id="tabeljabatan" width="100%" cellspacing="0">
<thead>
<tr align="center">
<th width="5%">No.</th>
<th>Nama Jabatan</th>
<th>Keterangan</th>
<th width="16%" align="center">Aksi</th>
</tr>
</thead>
<tbody>
#foreach($masterJabatan as $mj)
<tr>
<td align="center"></td>
<td>{{ $mj->nama_jabatan }}</td>
<td>{{ $mj->keterangan}}</td>
<td align="center">
Edit
Hapus
</td>
</tr>
#endforeach
</tbody>
</table>
and here is the JavaScript:
<script>
$(document).ready(function() {
var t = $('#tabeljabatan').DataTable( {
"columnDefs": [ {
"searchable": true,
"orderable": true,
"targets": 0
} ],
"order": [[ 1, 'asc' ]]
} );
t.on( 'order.dt search.dt', function () {
t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
} );
</script>
Why is this order-able and searchable table not working? The table screen appears the order icon.
And, as you can see I already set the searchable and order-able to be true.

Dynamic table - auto-show

I have the following code where I edit the field of a row in a table, but I want it to be more Dynamic, that is, when editing a field it jumps to the next field where I will edit. I have a success function where I should jump to the next field to edit what the Item would be, but I do not know why it does not work.
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
//WITH THIS CODE I COULD JUMP BUT THE LIST GIVE A ERROR AND CREATE A NEW TR WITH TD
$(this).parent().find(".Item").click();
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="task" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name="task" class="task" data-type="text">002</td>
<td data-name="Item" class="Item" data-type="select">Item1</td>
</tr>
</tbody>
</table>
I have seen an example on the next page. link you must press the checkbox auto-open next field at the moment of editing this jump to the next field to edit. I would like something like that, I hope I have explained myself well.
UPDATE: I add a line of code in my success function but the select give a error Error when loading list and in the table create a new <tr> with <td>

I just changed $(this).parent().find(".Item").editable('toggle'); to $(this).parent().find(".Item").click();
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
//WITH THIS CODE I COULD JUMP BUT THE LIST GIVE A ERROR AND CREATE A NEW TR WITH TD
$(this).parent().find(".Item").click();
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="task" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name="task" class="task" data-type="text">002</td>
<td data-name="Item" class="Item" data-type="select">Item1</td>
</tr>
</tbody>
</table>
I think that your error show up because there is no default value at first try changing item then change text in your snippet

$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
//CODE TO JUMP TO THE SELECT
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});
$('#table .task').on('hidden', function(e, reason){
if(reason === 'save' || reason === 'nochange') {
var $next = $(this).closest('tr').next().find('.task');
setTimeout(function() {
$next.editable('show');
}, 300);
}
});
$('#table .Item').on('hidden', function(e, reason){
if(reason === 'save' || reason === 'nochange') {
var $next = $(this).closest('tr').next().find('.Item');
setTimeout(function() {
$next.editable('show');
}, 300);
}
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="task" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name="task" class="task" data-type="text">002</td>
<td data-name="Item" class="Item" data-type="select">Item1</td>
</tr>
</tbody>
</table>

Please try again this. This will help you :)
$('#table').editable({
container: 'body',
selector: 'td.task',
title: 'task',
type: "POST",
showbuttons: false,
type: 'text',
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
},
success: function(response) {
//CODE TO JUMP TO THE SELECT
}
});
var ITEM = [];
$.each({
"Item1": "Item1",
"Item2": "Item2",
"Item3": "Item3",
"Item4": "Item4"
}, function(k, v) {
ITEM.push({
value: k,
text: v
});
});
$('#table').editable({
container: 'body',
selector: 'td.Item',
title: 'Item',
type: "POST",
showbuttons: false,
source: ITEM,
validate: function(value) {
if ($.trim(value) == '') {
return 'Empty!';
}
}
});
$('#table .task').on('hidden', function(e, reason) {
if (reason === 'save' || reason === 'nochange') {
$(this).parent().find(".Item").click();
}
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="task" data-type="text">001</td>
<td data-name="Item" class="Item" data-type="select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name="task" class="task" data-type="text">002</td>
<td data-name="Item" class="Item" data-type="select">Item1</td>
</tr>
</tbody>
</table>

Thankfully, since you linked to the working example, I was able to examine the code. You can do this, by the way, by simply opening up the developer tools in your browser. I use Chrome, so for me that's just F12. In the source code, I found the following:
$('#user .editable').on('hidden', function(e, reason){
if(reason === 'save' || reason === 'nochange') {
var $next = $(this).closest('tr').next().find('.editable');
if($('#autoopen').is(':checked')) {
setTimeout(function() {
$next.editable('show');
}, 300);
} else {
$next.focus();
}
}
});
The code reads almost like English, so it is fairly easy to follow I think.
When the editor is closed, we first check for the reason why it closed.
The code then finds the next field and pops open the editor if the "auto-open next textfield" is checked. It's interesting to see here that this is done with a timeout instead of just calling $next.editable('show'); That might be important or just for show.
In your code, you'll want to be able to find some unifying selector for your items. Easiest way to do it, I think, is to just add an .editable to your original source and call it like they do in the demo.
So, for your HTML:
<table id="table" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Task</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-name="task" class="editable task" data-type="text">001</td>
<td data-name="Item" class="editable Item" data-type="select">Item2</td>
</tr>
<tr>
<td>2</td>
<td data-name="task" class="editable task" data-type="text">002</td>
<td data-name="Item" class="editable Item" data-type="select">Item1</td>
</tr>
</tbody>
</table>
Notice the added class on the td tags. (EDIT: derp, didn't notice there was already a class attribute)
Then, you can emulate the demo js code, but be careful here because the $next variable cannot be selected in the same way. Your DOM layout is not the same since you have more than one editable cell in a row:
$('#table .editable').on('hidden', function(e, reason){
if(reason === 'save' || reason === 'nochange') {
var $next = $(this).nextAll().find('.editable');
if ($next.length > 0) {
$next = $next[0];
} else {
$next = $(this).closest('tr').next().find('.editable');
if ($next.length > 0) {
$next = $next[0];
} else {
return; // No editable fields remaining.
}
}
setTimeout(function() { $next.editable('show'); }, 300);
}
});
I should disclaim that I have not tested the above, but it should give you a good starting point to get going. The selection of the next field can probably be done a lot better than what I have, but I just don't have the testing environment to check this out properly.
EDIT: I've noticed that perhapse you only want to move on to the select field, but not necessarily from the select to the item in the next row. In that case, the code is a little bit simpler.
First off, there is no need for the editable class, so you can just use the html code you already have, but in the js, you need to address the selectors correctly:
$('#table .task').on('hidden', function(e, reason){
if(reason === 'save' || reason === 'nochange') {
var $next = $(this).nextAll().find('.Item');
setTimeout(function() { $next.editable('show'); }, 300);
}
});
And that should be it. When the editor on the select closes, the next field will not be selected automatically.

Sorting jQuery dataTables by class name when there is no type or value

I'm using DataTables: https://www.datatables.net/
Heres my HTML:
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover center" id="dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>title 1</td>
<td><span class="on"></span></td>
</tr>
<tr>
<td>2</td>
<td>title 2</td>
<td><span class="off"></span></td>
</tr>
<tr>
<td>3</td>
<td>title 3</td>
<td><span class="on"></span></td>
</tr>
</tbody>
I want to sort that table with last column but there's no value to sort... just class "on" and "off". Is there any atrribute that I can add to link tag like rel or something to put there 0/1 values? Or should I do that with JavaScript?
Here's JS code:
$('#dataTables-example').DataTable({
responsive: true,
"order": []
});

Take a look at dataTables columns / columnDefs render() function. You can return various content or values depending on the purpose : filter, display, type or sort. If you want to sort the column by 0 / 1 based on the <span> has the classes .on or .off, you can do this :
var table = $('#dataTables-example').DataTable({
columnDefs : [
{
targets: [2],
render: function ( data, type, full, meta ) {
if (type == 'sort') {
return $(data).find('span').hasClass('on') ? 1 : 0;
} else {
return data;
}
}
}
]
});
demo -> http://jsfiddle.net/9zvyhgb5/

Tablesorter with ajax refresh not working with more than one

I'm using jQueryUI tabs that has a table on each page. The tables are sorted by Tablesorter 2.0.
The following code works great when I have a single table undergoing a refresh on a page. If I add a second table w/ a refresh, only the first one updates. Can someone tell me how I can get two tables to be sorted by tablesorter with ajax refreshes of the data?
The reload is run through this JS function:
$(function () {
$(".tsRefresh").tablesorter({
headers: {
'.cbsort': { sorter: 'checkbox' },
'.nosort': { sorter: false, parser: false }
},
theme : 'jui',
headerTemplate : '{content} {icon}',
widgets : ['saveSort', 'uitheme'],
widgetOptions : {
zebra : ["odd", "even"]
}
});
function getBjson() {
var Tid = $('.tsRefresh').data('id');
var Ttable = $('.tsRefresh').data('table');
var Tbody = $('.tsRefresh').find('tbody').attr('id')
$.ajax({
type: "POST",
url: "ajax.php",
data: 'table=' + Ttable +'&id=' + Tid,
success: function(output) {
document.getElementById(Tbody).innerHTML = output;
// update tablesorter cache
$(".tsRefresh").trigger("update");
},
error: function (xhr, ajaxOptions, thrownError) {
$('#messageResponse').fadeIn(500);
$('#messageResponse').addClass('ui-state-error ui-corner-all').removeClass('ui-highlight-error');
$('#messageResponse').text(xhr.status + ' ' + thrownError + ': Something went wrong - check your inputs and try again.');
}
});
}
if( $('.tsRefresh').length) {
var Ttime = $('.tsRefresh').data('time');
var timer = setInterval(getBjson, Ttime);
getBjson();
}
});
The following is the table code:
<div id="tabs-1">
<fieldset>
<table width="100%" id="issue" name="issue" class="tsRefresh" data-id="<?=$item_id?>" data-table="eq-load" data-time="10000">
<thead>
<tr class="bold">
<th class="cbsort"><input type="checkbox" class="checkall"> </th>
<th>OAN/ID</th>
<th>Category</th>
<th>Desc</th>
<th>Issued To</th>
<th>SN</th>
</tr>
</thead>
<tbody id="container1">
</tbody>
</table>
</fieldset>
</div>
<div id="tabs-2">
<fieldset>
<table width="100%" id="my-load" name="my-load" class="tsRefresh" data-id="<?=$item_id?>" data-table="eq-load-me" data-time="10000">
<thead>
<tr class="bold">
<th class="cbsort"><input type="checkbox" class="checkall"> </th>
<th>OAN/ID</th>
<th>Category</th>
<th>Desc</th>
<th>Issued To</th>
<th>SN</th>
</tr>
</thead>
<tbody id="container2">
</tbody>
</table>
</fieldset>
</div>
My PHP script (ajax.php) outputs the following to the tablesorter's table:
<tr class="dialog-hover" data-table="eq-load-item" data-id="<?=$item_id?>">
<td align="center"><input type="checkbox" id="row-<?=$item_id?>" value="<?=$item_id?>"></td>
<td align="center" valign="top"><?=$item_oan?>-<?=$item_id?></td>
<td><?=$item_cat?></td>
<td align="center" valign="top"><?=$item_desc?></td>
<td align="center" valign="top"><?=$issue_name?></td>
<td align="center" valign="top"><?=$item_serial?></td>
</tr>

Datatables: how to get sort arrows on top

I’m using DataTables to display data in my UI.
I’ve configured it to show a search box for every column.
But now the sort arrows are not on the top any more.
How it is currently looking:
Image (I do not have enough reputation to post an image sry.)
How can I get them back to the top?
HTML:
<div id="container">
<div id="demo">
<h2>Index</h2>
<table id="example" class="display">
<thead>
<tr>
<th>MovieId</th>
<th>Title</th>
<th>TagLine</th>
<th>AirDate</th>
</tr>
<tr>
<td></td>
<td>Title</td>
<td>TagLine</td>
<td>AirDate</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
JS-Code:
$(document).ready(function () {
$('#example thead td').each(function () {
var title = $('#example thead td').eq($(this).index()).text();
if (title == "") {
return;
}
$(this).html('<input type="text" placeholder="SearchText ' + title + '" />');
});
var table = $('#example').DataTable({
"sAjaxSource": "http://localhost:51794/Movie/AjaxHandler",
"bProcessing": true,
"bServerSide": true,
"sDom": 'ltipr',
"aoColumns": [
{
"sName": "MovieId",
"bSortable": false,
"bSearchable": false,
"bVisible": false
},
{ "sName": "Title" },
{ "sName": "TagLine" },
{ "sName": "AirDate" }
]
});
$("#example thead input").on('keyup change', function () {
table
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
});

I suggest you to place the filters above header row, and your problem will be solved.
:
<thead>
<tr>
<td></td>
<td>Position</td>
<td>Office</td>
<td>Age</td>
<td>Start date</td>
<td>Salary</td>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>

Add the option
"bSortCellsTop": true
to your datatables init code.
http://legacy.datatables.net/usage/options#bSortCellsTop

Develop Reference

JavaScript is the programming language of the Web.

Clicking on sort, removes data from datatable. Reactjs Javascript - javascript

The scope of employessData is weird, so it thisclass. You will want to do this instead in render: let employessData = this.props.data; this.state.stateReady ? employessData.map(...); and then understand if/why this.props.data that this component receives is empty (which is not visible here).

Related

Datatables counter column won't order and search while it set to true in javascript

Dynamic table - auto-show

Sorting jQuery dataTables by class name when there is no type or value

Tablesorter with ajax refresh not working with more than one

Datatables: how to get sort arrows on top

Categories

Resources