bootgrid

<table id="grid" class="table">
        <thead>
            <tr>
                <th data-column-id="userId">用户ID</th>
                <th data-column-id="userName">用户姓名</th>
                <th data-column-id="userSubmit" data-formatter="command">操作</th>
            </tr>
        </thead>
    </table>

$(function(){
        $(‘#grid‘).bootgrid({
            //必须设置
            ajax:true,
            //传递的参数
            post:function(){
                return{
                    deleteFlg : 1,
                }
            },
            navigation:3,
            templates:{
                //表头左边显示提示信息
                header : "<div id=\"{{ctx.id}}\" class=\"{{css.header}}\"><div class=\"row\">"
                    + "<p class=\"{{css.infos}}\"></p></div></div>",
                //表脚右边显示分页
                footer : "<div id=\"{{ctx.id}}\" class=\"{{css.footer}} text-right\"><div class=\"row\">"
                    + "<p class=\"{{css.pagination}}\"></p></div></div>",
                //对表头的每个项目添加的图标
                icon : "<div id=\"{{ctx.iconCss}}\" class=\"{{css.icon}} table-color text-right\">"
                    + "<span class=\"glyphicon glyphicon-sort\"></span></div>"
            },
            labels: {
                all: "全部",
                //表头左边显示提示信息
                infos: "显示{{ctx.start}}～{{ctx.end}}条， 总{{ctx.total}}条",
                loading: "加载中...",
                noResults: "没有相关数据",
                refresh: "刷新中...",
                search: "查询中..."
            },
            
            //与java连接的口
            url:"initUser.do",
            //html中与data-data-formatter相连
            formatters:{
                //其中row为从java返回值的每行数据
                "command":function(column,row){
                    //在操作这一列显示的东西----data-row-id为自定义属性------row.id其中id为java返回行中的一个属性值id
                    return "<button class=\"btn\" data-row-id="+row.id+">查看</button>";
                }
            },
            //data为从java返回的所有数据
            responseHanlder:function(data){
                
            }
            //页面加载完成后的加载
        }).on("loaded.rs.juqery.bootgrid",function(){
            //在formatters中自定义属性data-row-id的值
            alert(11);
            alert($(this).data("row-id"));
        })
    });