Define Row Numebr in Jquery JTable Fileds

Question

In JQuery-JTable we have fields for list action , and it fetched records , I want to display Row Number beside each rows, I mean my first column should be row number .

Notice : Row number should be correct as JQuery-JTable changed view "Paging, Sorting ,and ....) This is my code :

<script type="text/javascript">
$(document).ready(function() {              
    $('#userTableContainer').jtable({
        title: 'Users',
        paging: true,
        pageSize: 15,
        sorting: true,
        create: false,
        edit: false,
        actions: {
            listAction: 'user/getUsers.asmx',
        },
        fields: {
            RowNumber : { title:'No' , display:function(){} } ,//---------it's hear.???? How to display row number for all record and pagging  
            username: {
                title: 'username'
            },
            firstname: {
                title: 'firstname'
            },
            lastname: {
                title: 'lastname'
            },
            company: {
                title: 'company'
            }
         }
    });
    $('#userTableContainer').jtable('load');              
});    

Answer 1

To make this work with indexing you have to get the current page number and page size.Once you have them you can always form the next RowNo.

var pageNum = $('.jtable-goto-page select option:selected').val();  
var pageSize = $('.jtable-page-size-change select option:selected').val();     
var RowNo= pagesize*pagenumber - pagesize;

Now replace the var RowNo= 0; with aforementioned.

But honestly no point calculating this from client side, rather get it directly from server side.

Answer 2

 <script type="text/javascript">
$(document).ready(function() { 
    var RowNumber = 0;             
    $('#userTableContainer').jtable({
        title: 'Users',
        paging: true,
        pageSize: 15,
        sorting: true,
        create: false,
        edit: false,
        actions: {
            listAction: 'user/getUsers.asmx',
        },
        fields: {

             RowNumber : {
              title: 'No',
              display: function () {
              RowNumber++;
              return RowNumber;
              }
            },
            username: {
                title: 'username'
            },
            firstname: {
                title: 'firstname'
            },
            lastname: {
                title: 'lastname'
            },
            company: {
                title: 'company'
            }
         }
    });
    $('#userTableContainer').jtable('load');              
});

Answer 3

You could fetch Row_Number from your SQL query as :

ROW_NUMBER() OVER (ORDER BY " +jtSorting+")

and bind it as a coulmn.