jsGrid中rownumbers功能失效，需在分页右侧显示总记录数

Hey there! Let's tackle those two jsGrid issues you're dealing with: getting the rownumbers feature to work properly, and displaying the total number of rows next to the pagination controls. Here's how to solve both:

1. Fixing the Rownumbers Feature #

I see you already set rownumbers: true in your config, but sometimes that default property doesn't play nice (especially with older jsGrid versions or custom field setups). Here are two reliable ways to get working row numbers:

Option 1: Custom Row Number Column (Best for Pagination) #

This method lets you control exactly how row numbers are displayed, including keeping them sequential across pages:

$("#jsgrid").jsGrid({ 
    autoload: true, 
    width: "100%", 
    filtering: true, 
    editing: true, 
    paging: true, 
    multiselect:true, 
    pageSize: 3, 
    pageButtonCount: 2, 
    sorting: true, 
    // Remove the default rownumbers: true, we'll build our own
    controller: { 
        loadData: function() { return data; } 
    },
    fields: [
        // Custom row number column
        {
            name: "rowNum",
            title: "#",
            width: 50,
            align: "center",
            sorting: false,
            filtering: false,
            editing: false,
            itemTemplate: function(value, item, index) {
                // Calculate correct row number across pages
                const currentPage = $("#jsgrid").jsGrid("option", "pageIndex");
                const rowsPerPage = $("#jsgrid").jsGrid("option", "pageSize");
                return (currentPage * rowsPerPage) + index + 1;
            }
        },
        // Add your existing fields here (e.g., name, email, etc.)
        // { name: "username", title: "Username", width: 150 },
        // ... rest of your fields
    ]
});

Option 2: Verify jsGrid Version & Config #

If you want to stick with the default rownumbers property, double-check that you're using a jsGrid version that supports it (some older builds don't include this feature). Also, make sure you haven't overridden it with a custom fields array that conflicts with the auto-generated row number column.

2. Show Total Row Count Next to Pagination #

To display the total number of rows on the right side of the pagination controls, use the onDataLoaded event to inject the count dynamically:

$("#jsgrid").jsGrid({ 
    autoload: true, 
    width: "100%", 
    filtering: true, 
    editing: true, 
    paging: true, 
    multiselect:true, 
    pageSize: 3, 
    pageButtonCount: 2, 
    sorting: true, 
    rownumbers: true, // Keep if Option 2 worked for you
    controller: { 
        loadData: function() { return data; } 
    },
    // Trigger after data finishes loading
    onDataLoaded: function(args) {
        const totalRows = args.data.length;
        const $pager = $("#jsgrid .jsgrid-pager");
        
        // Remove existing count to avoid duplicates
        $pager.find(".total-row-count").remove();
        
        // Add the total count to the pager
        $pager.append(`<span class="total-row-count" style="margin-left: 10px; line-height: 30px;">Total: ${totalRows} rows</span>`);
    }
});

Optional CSS for Better Alignment #

If you want the count to match the pagination button styling, add this CSS:

.total-row-count {
    color: #666;
    font-size: 14px;
    font-family: inherit;
}

That should resolve both of your issues! The custom row number column will keep your numbers accurate across pages, and the onDataLoaded event will make sure the total row count stays updated whenever data loads.

内容的提问来源于stack exchange，提问作者Viral Vanani