How to exclude first row from data table index?

Starr Duskk
Starr Duskk used Ask the Experts™
on
I have a dataTable that I am building that switches between tile and list view. On the tile view I have inserted a row that is a new button which users can click to insert a new user. When the table is returning the number of records in the table it will include the NewButtonRow in the count.
For example, in the simplified table below I have one record, but the number of records returned will be 2 because of the NewButtonRow.
 <table id="TableTeamGrid">
            <thead>
                <tr>
                    <th>
                    </th>
                </tr>
            </thead>
            <tbody id="dataContainer" clientidmode="Static" runat="server">
                <tr id="NewButtonRow">
                               <td class="stylAddNewBtn"></td>
                </tr>
                <tr id="TileRow">
                               <td></td>
                </tr>
  </tbody>
 </table>

Open in new window

I need it to show 1(START) of 1(MAX or TOTAL) in the case of the simplified table above instead of 1(START) of 2(MAX or TOTAL).
I am using this dataTable here: https://datatables.net/.
These are the settings I have for the table:
$(document).ready(function () { 
  $('#TableTeamGrid').DataTable( {
"ordering": true,
"order": [ 1, 'asc' ],
"stateSave": false,
"serverside":   false,
"autoWidth": false,
"language": {
"lengthMenu": '<select>'+'<option value="10">10 per page</option>'+'<option value="20">20 per page</option>'+'<option value="30" selected>30 per page</option>'+'<option value="40">40 per page</option>'+'<option value="50">50 per page</option>'+ '<option value="-1">All</option>'+'</select>'  ,
"info": "_START_ of _MAX_"  ,
"paginate": {
"previous": "<<"  ,
"next": ">>" 
 }
 } ,
"pageLength": 30 ,
scrollResize: true,
scrollY: false,
scrollX: true,
scrollCollapse: true,
"dom": '<"stylTableMenu"filp>tB' 
});
});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

you have errors
you have a square bracket  ] which is alone in your code...
and you have other errors in your code so you need to fix that first

could you set a test case so we can check and debug

- Client-side processing: http://live.datatables.net/idinat/edit#javascript,html
- Server-side processing: http://live.datatables.net/idinat/2/edit

If you can't what you can do is removed all datatables, make sure the data is loading ok
the add  add one setting  at the time and test so you will find all the errors

then if you still have an issue let us know
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
@Lenamtl

I'm sorry that my code had errors that confused you. I was taking the complex code that I had and simplifying it. I must have missed adding in the closing tags for the tbody and table when I was taking out extra data, and forgot to take out the bracket that was needed for a style for the dataTable, but didn't relate to this issue. I didn't think I would need to add a test case since I was wondering if anyone knew how to edit the data record count. It isn't inaccurate or giving errors, I just don't want it to include the row I loaded in that is the New Button since it's not a record. I'm sorry I didn't specify my question clearly. It's giving the accurate record count, but I need to be able to edit that count so it excludes the row that has the NewButton from the data.
Ok no problem from datatables count() API documentation https://datatables.net/reference/api/count()
you will be able to get the count from that you can change it to any calculation

You could put your button in tfoot or thead instead of directly into the table so your count will be good.

I usually put my button outside of the table using the button space  https://datatables.net/reference/button/
or completely outside Datatable.

When I need  buttons for a row I put them in a specific column which I treated differently.


where the button appear is this like a child row or a regular row?
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

Starr DuskkASP.NET VB.NET Developer

Author

Commented:
My button is a regular row, as depicted in my simplified example. I don't want to just get the count. I need to be able to alter the record number and insert that correction into the info value so it would show the correct value of records without the new button. As in my example where I said it's showing 1 of 2 records when it should actually be 1 of 1.
Yes I understand.

If you get the count you can do -1 for the button row then you will have the correct row result.

So why don't you put the button else where instead of directly in a table row, thead, tfoot, datatables button area, outside the table?
This would be the easiest solution.

Also you can use complex header https://datatables.net/extensions/fixedcolumns/examples/styling/rowspan.html

I don't see a case where I would need a button in a row, I can understand having a button in a column to edit a row ...
Could you elaborate on this so maybe I can suggest something else...
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
This is our design. I can't place the button outside of the table. I have included an image as an example below. Hopefully from the snip you can an idea of why I need the button in the table.
DTExample.png
Hi,

The problem with Datatables is if this row is present it is calculated as a row.
There is nothing ready to use to exclude a row from count.

So if you keep this row in the table you will need to get the total of rows -1 and override the paging total with that value.  
You will need to make this custom calculation to a specific table not to alter other Datatables table of your application.
Using https://datatables.net/reference/api/page.info() 
see these results
 
 "recordsTotal": 57,

Open in new window


Here is an example on how to get the total records value https://jsfiddle.net/lenamtl/ow6e7Lh3/
so you can play and adjust it with your code (but it is not seems to be easy to do it)

or check here on how to do it custom using the dom
http://live.datatables.net/pebonuha/1/edit

Other usefull information that you can play with
https://datatables.net/reference/api/row().data()
https://datatables.net/reference/api/row().remove()

Other solutions outside the tbody:

- You can put the button in the table header and display the header as a column, you will need to modify the table header CSS to make it look the same

- Simply put the button near the export button

- You can create a custom paging system
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
Thank you so much for you assistance and staying with me to work through the problem!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial