Dynamic Table JQuery Editting - javascript

I am totally newbie for JQuery but I need someone help for this part.
I m dealing with a dynamic table from a template. I wish to remove the 10 records per page section but I have no idea how to do so. Anyone please?
Here is the HTML code which I still understandable
<table class="table table-striped border-top" id="sample_1">
<thead>
<tr>
<!-- <th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th> -->
<th>No</th>
<th>Name</th>
<th class="hidden-phone">Name</th>
<th class="hidden-phone">Text</th>
<th class="hidden-phone">Text</th>
<th class="hidden-phone">Text</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<!-- <td><input type="checkbox" class="checkboxes" value="1" /></td> -->
<td>1</td>
<td>Jhone doe</td>
<td class="hidden-phone">jhone-doe#gmail.com</td>
<td class="hidden-phone">10</td>
<td class="center hidden-phone">02.03.2013</td>
<td class="hidden-phone"><span class="label label-success">Approved</span></td>
</tr>
<tr class="odd gradeX">
<!-- <td><input type="checkbox" class="checkboxes" value="1" /></td> -->
<td>2</td>
<td>dipsdf</td>
<td class="hidden-phone">lorem-ip#gmail.com</td>
<td class="hidden-phone">33</td>
<td class="center hidden-phone">05.04.2013</td>
<td class="hidden-phone"><span class="label label-success">Approved</span></td>
</tr>
</tbody>
</table>
Jquery part which I have no idea what it doing there
var Script = function () {
// begin first table
$('#sample_1').dataTable({
"sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}]
});
jQuery('#sample_1 .group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).attr("checked", true);
} else {
$(this).attr("checked", false);
}
});
jQuery.uniform.update(set);
});
jQuery('#sample_1_wrapper .dataTables_filter input').addClass("form-control"); // modify table search input
jQuery('#sample_1_wrapper .dataTables_length select').addClass("form-control"); // modify table per page dropdown}();
I am trying to link the table with display data from database while replacing the 10 records per page section with an add button there. Anyone please.
Appreciate.

If you're just trying to list all the records at once (plus hide the option to change number show per page) you have to disable pagination.
Add the following option to your datatables call.
"bPaginate": false
Read more about Datatable options here.
EDIT
If you still want to paginate but just hide the "per page" option, use the following option instead.
"bLengthChange": false
JSFiddle

Related

Cannot read property 'mData' of undefined - Datatables [duplicate]

I have an issue with Datatables. I also went through this link which didn't yield any results. I have included all the prerequisites where I'm parsing data directly into the DOM.
Script
$(document).ready(function() {
$('.viewCentricPage .teamCentric').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bPaginate": false,
"bFilter": true,
"bSort": true,
"aaSorting": [
[1, "asc"]
],
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0]
}, {
"bSortable": true,
"aTargets": [1]
}, {
"bSortable": false,
"aTargets": [2]
}],
});
});
FYI dataTables requires a well formed table. It must contain <thead> and <tbody> tags, otherwise it throws this error. Also check to make sure all your rows including header row have the same number of columns.
The following will throw error (no <thead> and <tbody> tags)
<table id="sample-table">
<tr>
<th>title-1</th>
<th>title-2</th>
</tr>
<tr>
<td>data-1</td>
<td>data-2</td>
</tr>
</table>
The following will also throw an error (unequal number of columns)
<table id="sample-table">
<thead>
<tr>
<th>title-1</th>
<th>title-2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data-1</td>
<td>data-2</td>
<td>data-3</td>
</tr>
</tbody>
</table>
For more info read more here
A common cause for Cannot read property 'fnSetData' of undefined is the mismatched number of columns, like in this erroneous code:
<thead> <!-- thead required -->
<tr> <!-- tr required -->
<th>Rep</th> <!-- td instead of th will also work -->
<th>Titel</th>
<!-- th missing here -->
</tr>
</thead>
<tbody>
<tr>
<td>Rep</td>
<td>Titel</td>
<td>Missing corresponding th</td>
</tr>
</tbody>
While the following code with one <th> per <td> (number of columns must match) works:
<thead>
<tr>
<th>Rep</th> <!-- 1st column -->
<th>Titel</th> <!-- 2nd column -->
<th>Added th</th> <!-- 3rd column; th added here -->
</tr>
</thead>
<tbody>
<tr>
<td>Rep</td> <!-- 1st column -->
<td>Titel</td> <!-- 2nd column -->
<td>th now present</td> <!-- 3rd column -->
</tr>
</tbody>
The error also appears when using a well-formed thead with a colspan but without a second row.
For a table with 7 colums, the following does not work and we see "Cannot read property 'mData' of undefined" in the javascript console:
<thead>
<tr>
<th>Rep</th>
<th>Titel</th>
<th colspan="5">Download</th>
</tr>
</thead>
While this works:
<thead>
<tr>
<th rowspan="2">Rep</th>
<th rowspan="2">Titel</th>
<th colspan="5">Download</th>
</tr>
<tr>
<th>pdf</th>
<th>nwc</th>
<th>nwctxt</th>
<th>mid</th>
<th>xml</th>
</tr>
</thead>
Having <thead> and <tbody> with the same numbers of <th> and <td> solved my problem.
I had this same problem using DOM data in a Rails view created via the scaffold generator. By default the view omits <th> elements for the last three columns (which contain links to show, hide, and destroy records). I found that if I added in titles for those columns in a <th> element within the <thead> that it fixed the problem.
I can't say if this is the same problem you're having since I can't see your html. If it is not the same problem, you can use the chrome debugger to figure out which column it is erroring out on by clicking on the error in the console (which will take you to the code it is failing on), then adding a conditional breakpoint (at col==undefined). When it stops you can check the variable i to see which column it is currently on which can help you figure out what is different about that column from the others. Hope that helps!
This can also occur if you have table arguments for things like 'aoColumns':[..] which don't match the correct number of columns. Problems like this can commonly occur when copy pasting code from other pages to quick start your datatables integration.
Example:
This won't work:
<table id="dtable">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
</thead>
<tbody>
<td>data 1</td>
<td>data 2</td>
</tbody>
</table>
<script>
var dTable = $('#dtable');
dTable.DataTable({
'order': [[ 1, 'desc' ]],
'aoColumns': [
null,
null,
null,
null,
null,
null,
{
'bSortable': false
}
]
});
</script>
But this will work:
<table id="dtable">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
</thead>
<tbody>
<td>data 1</td>
<td>data 2</td>
</tbody>
</table>
<script>
var dTable = $('#dtable');
dTable.DataTable({
'order': [[ 0, 'desc' ]],
'aoColumns': [
null,
{
'bSortable': false
}
]
});
</script>
One more reason why this happens is because of the columns parameter in the DataTable initialization.
The number of columns has to match with headers
"columns" : [ {
"width" : "30%"
}, {
"width" : "15%"
}, {
"width" : "15%"
}, {
"width" : "30%"
} ]
I had 7 columns
<th>Full Name</th>
<th>Phone Number</th>
<th>Vehicle</th>
<th>Home Location</th>
<th>Tags</th>
<th>Current Location</th>
<th>Serving Route</th>
Tips 1:
Refer to this Link you get some Ideas:
https://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined
Tips 2:
Check following is correct:
Please check the Jquery Vesion
Please check the versiion of yours CDN or your local datatable related .min & css files
your table have <thead></thead> & <tbody></tbody> tags
Your table Header Columns Length same like Body Columns Length
Your Using some cloumns in style='display:none' as same propery apply in you both Header & body.
your table columns no empty, use something like [ Null, --, NA, Nil ]
Your table is well one with out <td>, <tr> issue
You have to remove your colspan and the number of th and td needs to match.
I faced the same error, when tried to add colspan to last th
<table>
<thead>
<tr>
<th> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
and solved it by adding hidden column to the end of tr
<thead>
<tr>
<th> </th> <!-- column 1 -->
<th colspan="2"> </th> <!-- column 2&3 -->
<!-- hidden column 4 for proper DataTable applying -->
<th style="display: none"></th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<!-- hidden column 4 for proper DataTable applying -->
<td style="display: none"></td>
</tr>
</tbody>
Explanaition to that is that for some reason DataTable can't be applied to table with colspan in the last th, but can be applied, if colspan used in any middle th.
This solution is a bit hacky, but simpler and shorter than any other solution I found.
I hope that will help someone.
in my case this error occured if i use table without header
<thead>
<tr>
<th>example</th>
</tr>
</thead>
I am getting a similar error. The problem is that the header line is not correct. When I did the following header line, the problem I was having was resolved.
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th colspan="6">Common Title</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
Slightly different problem for me from the answers given above. For me, the HTML markup was fine, but one of my columns in the javascript was missing and didn't match the html.
i.e.
<table id="companies-index-table" class="table table-responsive-sm table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Created at</th>
<th>Updated at</th>
<th>Count</th>
</tr>
</thead>
<tbody>
#foreach($companies as $company)
<tr>
<td>{{ $company->id }}</td>
<td>{{ $company->name }}</td>
<td>{{ $company->created_at }}</td>
<td>{{ $company->updated_at }}</td>
<td>{{ $company->count }}</td>
</tr>
#endforeach
</tbody>
</table>
My Script:-
<script>
$(document).ready(function() {
$('#companies-index-table').DataTable({
serverSide: true,
processing: true,
responsive: true,
ajax: "{{ route('admincompanies.datatables') }}",
columns: [
{ name: 'id' },
{ name: 'name' },
{ name: 'created_at' },
{ name: 'updated_at' }, <-- I was missing this line so my columns didn't match the thead section.
{ name: 'count', orderable: false },
],
});
});
</script>
I had a dynamically generated, but badly formed table with a typo. I copied a <td> tag inside another <td> by mistake. My column count matched. I had <thead> and <tbody> tags. Everything matched, except for this little mistake I didn't notice for a while, because my column had a lot of link and image tags in it.
This one drove me crazy - how to render a DataTable successfully in a .NET MVC view. This worked:
**#model List<Student>
#{
ViewData["Title"] = "Index";
}
<h2>NEW VIEW Index</h2>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
#foreach (var element in Model)
{
<tr>
<td>#Html.DisplayFor(m => element.ID)</td>
<td>#Html.DisplayFor(m => element.FirstName)</td>
<td>#Html.DisplayFor(m => element.LastName)</td>
</tr>
}
</tbody>
</table>**
Script in JS file:
**$(document).ready(function () {
$('#example').DataTable();
});**
For those working in Webforms using GridView:
Moses's answer is totally correct. But since we're generating the table, the thead tag isn't generated by default. So to solve the problem add [YourGridViewID].HeaderRow.TableSection = TableRowSection.TableHeader to your backend, below of the DataBind() method call (if you're using it). This configuration takes the HeaderText value of the Field in your GridView as the value of the th tag it generates inside the thead.
In my case, and using ASP.NET GridView, UpdatePanel and with DropDownList (with Chosen plugin where I reset value to zero using a Javascript line), I got this error and tried everything with no hope for days. The problem was that the code of my dropdown in code behind was as follows and when I select a value twice to apply its action to selected grid rows I get that error. I thought for days it's a Javascript issue (again, in my case) and finally the fix was giving zero for the drowpdown value with the update process:
private void ddlTasks_SelectedIndexChanged(object sender, System.EventArgs e)
{
if (ddlTasks.SelectedValue != 0) {
ChangeStatus(ddlTasks.SelectedValue);
ddlTasks.SelectedValue = "0"; //// **This fixed my issue**
}
dvItemsGrid.DataSource = CreateDatasource();
dvItemsGrid.DataBind();
dvItemsGrid.UseAccessibleHeader = true;
dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;
}
This was my fault:
$('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();
I had encountered the same issue but I was generating table Dynamically. In my case, my table had missing <thead> and <tbody> tags.
here is my code snippet if it helped somebody
//table string
var strDiv = '<table id="tbl" class="striped center responsive-table">';
//add headers
var strTable = ' <thead><tr id="tableHeader"><th>Customer Name</th><th>Customer Designation</th><th>Customer Email</th><th>Customer Organization</th><th>Customer Department</th><th>Customer ContactNo</th><th>Customer Mobile</th><th>Cluster Name</th><th>Product Name</th><th> Installed Version</th><th>Requirements</th><th>Challenges</th><th>Future Expansion</th><th>Comments</th></tr> </thead> <tbody>';
//add data
$.each(data, function (key, GetCustomerFeedbackBE) {
strTable = strTable + '<tr><td>' + GetCustomerFeedbackBE.StrCustName + '</td><td>' + GetCustomerFeedbackBE.StrCustDesignation + '</td><td>' + GetCustomerFeedbackBE.StrCustEmail + '</td><td>' + GetCustomerFeedbackBE.StrCustOrganization + '</td><td>' + GetCustomerFeedbackBE.StrCustDepartment + '</td><td>' + GetCustomerFeedbackBE.StrCustContactNo + '</td><td>' + GetCustomerFeedbackBE.StrCustMobile + '</td><td>' + GetCustomerFeedbackBE.StrClusterName + '</td><td>' + GetCustomerFeedbackBE.StrProductName + '</td><td>' + GetCustomerFeedbackBE.StrInstalledVersion + '</td><td>' + GetCustomerFeedbackBE.StrRequirements + '</td><td>' + GetCustomerFeedbackBE.StrChallenges + '</td><td>' + GetCustomerFeedbackBE.StrFutureExpansion + '</td><td>' + GetCustomerFeedbackBE.StrComments + '</td></tr>';
});
//add end of tbody
strTable = strTable + '</tbody></table>';
//insert table into a div
$('#divCFB_D').html(strDiv);
$('#tbl').html(strTable);
//finally add export buttons
$('#tbl').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
In addition to inconsistent and numbers, a missing item inside datatable scripts columns part can cause this too. Correcting that fixed my datatables search bar.
I'm talking about this part;
"columns": [
null,
.
.
.
null
],
I struggled with this error till I was pointed that this part had one less "null" than my total thead count.
in my case the cause of this error is i have 2 tables that have same id name with different table structure, because of my habit of copy-paste table code. please make sure you have different id for each table.
<table id="tabel_data">
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
<th>heading 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>data-1</td>
<td>data-2</td>
<td>data-3</td>
<td>data-4</td>
<td>data-5</td>
</tr>
</tbody>
</table>
<table id="tabel_data">
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data-1</td>
<td>data-2</td>
<td>data-3</td>
</tr>
</tbody>
</table>
You need to wrap your your rows in <thead> for the column headers and <tbody> for the rows. Also ensure that you have matching no. of column headers <th> as you do for the td
I may be arising by aoColumns field. As stated HERE
aoColumns: If specified, then the length of this array must be equal
to the number of columns in the original HTML table. Use 'null' where
you wish to use only the default values and automatically detected
options.
Then you have to add fields as in table Columns
...
aoColumnDefs: [
null,
null,
null,
{ "bSortable": false },
null,
],
...
I found some "solution".
This code doesn't work:
<table>
<thead>
<tr>
<th colspan="3">Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
But this is ok:
<table>
<thead>
<tr>
<th colspan="2">Test</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
I think, that the problem is, that the last TH can't have attribute colspan.

Filter Textfield Jquery in Pagination

Hi I am new to html javascript, jquery any help will be really appreciated I managed to create a table that has filter input but my problem is when I type in search box and i its filtering but when I backspace until the textfield is empty it showing whole rows of the table my pagination didntwork because in my first load without searching yet in the input textfield table showing two rows and has numbers page next button only showing two rows per page but if i filter search and make my field empty it will not limit the rows it will show all rows like right now i have six rows it will shows six rows where I want it to be only two rows shows and when click next two rows again *link for pagination --> https://www.jqueryscript.net/table/Client-side-HTML-Table-Pagination-Plugin-with-jQuery-Paging.html *
HTML
<table id="myTable">
<thead>
<tr>
<th>Firstname</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>100</td>
</tr>
<tr>
<td>Mary</td>
<td>200</td>
</tr>
<tr>
<td>July</td>
<td>300</td>
</tr>
<tr>
<td>Juy</td>
<td>3000</td>
</tr>
<tr>
<td>uy</td>
<td>1000</td>
</tr>
<tr>
<td>buy</td>
<td>10700</td>
</tr>
</tbody>
</table>
Javascript
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
$('#myTable').paging({
limit: 2,
rowDisplayStyle: 'block',
activePage: 0,
rows: []
}); });

jquery- table column filter and row toggling together not working properly

I have created a table with column filter and a button "test" for toggling rows of that table
HTML
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.tablesorter.combined.js"></script>
<script src="js/widget-columnSelector.js"></script>
<script src="js/widget-sort2Hash.js"></script>
<div>
<input type="button" id="test" className="invalid" value="Hide">
<table id="testtable" class="tablesorter custom-popup">
<thead>
<tr>
<th class="filter-false">S.no</th>
<th class="filter-false">name</th>
<th class="filter-select" data-placeholder="Select All">Department</th>
<th class="filter-false">Age</th>
<th class="filter-false">Section</th>
</tr>
</thead>
<tbody>
<tr class="invalid">
<td>1</td>
<td>yyy</td>
<td>CSE</td>
<td>17</td>
<td>A</td>
<tr>
<tr>
<td>1</td>
<td>zzz</td>
<td>ECE</td>
<td>17</td>
<td>A</td>
<tr>
<tr class="invalid">
..
</tr>
...
</div>
JS
$(document).ready(function () {
$('#test').on('click', function () {
var name = $(this).attr('className');
if ($(this).val() == 'Hide' ) {
$('#testtable tr.' + name).hide();
$(this).val('Show');
} else{
$('#testtable tr.' + name).show();
$(this).val('Hide');
}
});
});
With the above JS code I can able to toggle rows which has class name "invalid".
But when I tried to add column filter in Department column, toggling is not working properly.
1.If I filter the column by selecting any option from dropdown and clicking hide button, The filtered row which has "invalid" is hiding properly..but if again i pressed show it showing all the "invalid" rows not only filtered.
2.If I filter the column by selecting any option and pressed hide,now rows are hided then if i select "select all", it is showing full table.
I dont even have any idea to solve above scenarios.
Please suggest me on this.

Tablesorter Child Row always shows for every search filter

The email row is the parent. And the address is the child row.
The childRows are displayed for every search filter keyword.
My aim is to simply filter childRows and show only the matching childRows with Parent Rows as output.
Can someone please help me in figuring out where the problem is.
HTML code:
<div class="form-control divCheckBox">
<div class="tableFilterLink" data-table="selectedTableFilter">
<i class="icon-filter"></i>
<a>Show Filters</a>
</div>
<table id="selectedTableFilter" class="table table-bordered table-striped">
<thead>
<tr>
<th>Selected Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>dffbach#yahoo.com</td>
</tr>
<tr>
<td>kjjdoe#hotmail.com</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>2255 254th Avenue Se<br>Albany, Oregon 97321</div>
</td>
</tr>
<tr>
<td>pootconway#earthlink.net</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>99700 Bell Road<br>Auburn, California 95603</div>
</td>
</tr>
</tbody>
</table>
</div>
Javascript:
$("#selectedTableFilter").tablesorter({
debug: true,
headerTemplate: "{content}<b></b>",
cssChildRow : "tablesorter-childRow",
widgets: ["zebra","filter"],
sortInitialOrder: "asc",
sortList: [[0,0]],
sortRestart: true,
widgetOptions: {
filter_hideFilters: true,
zebra : ['normal-row', 'alt-row' ],
filter_childRows: true,
filter_cssFilter : 'tablesorter-filter',
filter_startsWith: false,
filter_ignoreCase : true,
filter_childWithSibs: false,
},
widthFixed: true
});
Thanks #Mottie
Github Issue link
If you are using a custom theme for tablesorter, please make sure that the following definition is included:
.tablesorter-filter {
display: none;
}
JSFIDDLE

Select multiple rows in a table filled by a Servlet

Sorry for my noob question, but I have a table filled by a servlet on my JSP page:
Table
<table id="tableusers" class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Adresse</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
JavaScript
$.get('/SRV/webUserServlet', function(responseJson) {
if (responseJson != null) {
var table1 = $("#tableusers");
$.each(responseJson, function(key, value) {
var rowNew = $("<tr><td></td><td class=\"center\"></td><td class=\"center\"></td><td class=\"center\"></td></tr>");
rowNew.children().eq(0).text(value['nom']);
rowNew.children().eq(1).text(value['prenom']);
rowNew.children().eq(2).text(value['adresse']);
rowNew.children().eq(3).text(value['email']);
rowNew.appendTo(table1);
});
}
});
Table is filled correctly but I tried multiple jQuery javascripts to select multiple rows from this table and send the result of the select lines to another servlet but unfortunately as the content is dynamic, I'm not able to make any JS script functional.
How can I select one, or multiple (or all) rows and send the selected lines (with all the columns) to a servlet ?
When you are building the table, assign classes and / or id's to the td's that you want the values from. You can then use jquery to select off of an id, for instance, instead of selecting off of a value.
<table id="tableusers" class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr class="columns">
<th id="col1">Nom</th>
<th id="col2">Prénom</th>
<th id="col3">Adresse</th>
<th id="col4">email</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
Then you can select the values like this:
$("#col1").text();
or like this:
$("tr.columns th").each(function() {
$(this).text();
});
Apply the same principle to rows in the body if you are wanting those values too.
There is no relation with servlet, you only have a javascript problem.
Write a simple page in raw HTML, include your js code and load your page in a browser with developpers tools activated. Debug and look at which URLs are called. Once you'll have resolved this problem you will try to integrate the solution in your JSP.
Finally I'm parsing my table using DOM:
var table = document.getElementById('tabletest');
var rowLength = table.rows.length;
for(var i=1; i<rowLength; i+=1){
var row = table.rows[i];
var cellLength = row.cells.length;
if(row.cells[0].getElementsByTagName('input')[0].checked==true){
console.log("checked");
console.log("cellule: "+row.cells[1].innerHTML);
}
}
could be interesting for people who have the same problem than me....but without JQuery.
by the way, it works only with a static table content. when I'm trying to parse the table dynamically filled by the servlet, the if statement
if(row.cells[0].getElementsByTagName('input')[0].checked==true)
is generating an error (input undefined) but by looking at the table values, the row.cells[0] contains:
cell[0]: <input type="checkbox">
I tried with a static table with the exact table structure:
<table id="tabletest" class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th style="width:20px;"><input type="checkbox" id="checkall" title="Select all"></th>
<th>Nom</th>
<th>Prénom</th>
<th>Adresse</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"> </td>
<td>john</td>
<td>smith</td>
<td>12 rue des laures</td>
<td>john#tt.com</td>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td>marcel</td>
<td>dib</td>
<td>13 rue des laures</td>
<td>marcel#tt.com</td>
</tr>
<tr>
<td><input type="checkbox"> </td>
<td>toto</td>
<td>titi</td>
<td>14 rue des laures</td>
<td>steph#tt.com</td>
</tr>
</tbody>
</table>
with the following script:
function checkSelectedUsers(){
var table = document.getElementById('tabletest');
var rowLength = table.rows.length;
for(var i=1; i<rowLength; i+=1){
var row = table.rows[i];
//console.log("row: "+row.innerHTML);
console.log("row:"+row.innerHTML);
console.log("cell[0]:"+row.cells[0].innerHTML);
console.log("cell[1]:"+row.cells[1].innerHTML);
if(row.cells[0].getElementsByTagName('input')[0].type == "checkbox")
console.log("Checkbox:"+row.cells[0].getElementsByTagName('input')[0].checked);
/* if(row.cells[0].getElementsByTagName('input')[0].checked==true){
console.log("checked");
console.log("cellule: "+row.cells[4].innerHTML);
}*/
}
}
I have the following in the logs console:
row:
<td><input type="checkbox"> </td>
<td>john</td>
<td>smith</td>
<td>12 rue des laures</td>
<td>john#tt.com</td>
cell[0]:<input type="checkbox">
cell[1]:john
Checkbox:false
row:
<td><input type="checkbox"> </td>
<td>marcel</td>
<td>dib</td>
<td>13 rue des laures</td>
<td>marcel#tt.com</td>
cell[0]:<input type="checkbox">
cell[1]:marcel
Checkbox:false
row:
<td><input type="checkbox"> </td>
<td>toto</td>
<td>titi</td>
<td>14 rue des laures</td>
<td>steph#tt.com</td>
cell[0]:<input type="checkbox">
cell[1]:toto
Checkbox:false
so my table is parsed correctly. But if I get the same JS function with the table generated with JQuery:
$(document).ready(function() {
$.get('/OrdolinkSRV/webUserServlet',function(responseJson) {
if(responseJson!=null){
var table1 = $("#tableusers");
$.each(responseJson, function(key,value) {
var rowNew = $("<tr><td><input type=\"checkbox\"></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(1).text(value['nom']);
rowNew.children().eq(2).text(value['prenom']);
rowNew.children().eq(3).text(value['adresse']);
rowNew.children().eq(4).text(value['email']);
rowNew.appendTo(table1);
});
}
});
});
I have the following error :
row:
Uncaught TypeError: Cannot read property 'innerHTML' of undefined

Categories

Resources