asp.net core mvc 框架搭建五、数据表格的使用【干货教程】

本节我们详细讨论一下数据表格的使用

1. 加载数据与刷新数据

        $("#dataTables").bootstrapTable({
            url: '@Url.Action("GetAllMess", "Users")',
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            sortable: false  , //是否启用排序
            pagination: true, //是否显示分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 15, //每页的记录行数（*）
            pageList: [1, 10, 25, 50, 100], //可供选择的每页的行数（*）
            sidePagination: "server", //服务端处理分页
            search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            columns: [{ field: 'Users_ID', title: 'ID', width: '80', halign: 'center', align: 'left', sortable: false },
                { field: 'Users_ID', title: '客户账号', width: '120', halign: 'center', align: 'left', sortable: false },
                { field: 'Users_ID', title: '客户名称', width: '120', halign: 'center', align: 'left', sortable: false },
                { field: 'Users_ID', title: '创建时间', width: '180', halign: 'center', align: 'left', sortable: false },
                {
                    title: '编辑',
                    formatter: function (value, row, index) {
                        var url = 
                            '<input type="button" data-toggle="modal" style="cursor:pointer" data-target="#editModal" οnclick="checkAct(' + row.Users_ID + ',false)" value=" 编 辑" />' ;
                        return url;
                    }
                }]
        })

刷新数据js代码

         //根据条件查询
        function reloadData() {
            var url = '@Url.Action("GetAllMess", "Users")';
            var opt = {
                url: encodeURI(url),
                cache: false,
                query: { type: 1, level: 2 }
             };
            $("#dataTables").bootstrapTable('refresh', opt);
        }

2. 数据的分页

3. 格式化单元格数据

此处function(value,row,index){}//value 表示当前绑定值，User_ID,row 表示当前行。比如row.User_ID也可以获取当前行ID值，index 表示索引值。

4. 事件监听与数据传递

格式化的代码中 如果有按钮，onClick 事件可以像普通事件一样 指定到某个function处理。可以正常传递参数。