1 <tbody id="history_income_list">  2 <tr>  3 <td align="center"><input type="text" class="input-s input-w input-hs"></td>  4 <td align="center"><input type="text" class="input-s input-w input-hs"></td>  5 <td align="center"><input type="text" class="input-s input-w input-hs"></td>  6 <td align="center"><a class="" onclick="history_income_del(this);" href="###">删除</a></td>  7 </tr>  8 <tr>  9 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 10 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 11 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 12 <td align="center"><a class="" href="###">删除</a></td> 13 </tr> 14 <tr> 15 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 16 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 17 <td align="center"><input type="text" class="input-s input-w input-hs"></td> 18 <td align="center"><a class="" href="###">删除</a></td> 19 </tr> 20 </tbody> 21 

var trList = $("#history_income_list").children("tr") for (var i=0;i<trList.length;i++) { var tdArr = trList.eq(i).find("td"); var history_income_type = tdArr.eq(0).find('input').val();//收入类别 var history_income_money = tdArr.eq(1).find('input').val();//收入金额 var history_income_remark = tdArr.eq(2).find('input').val();// 备注  alert(history_income_type);
        alert(history_income_money);
        alert(history_income_remark);
    }

$("#history_income_list").find("tr").each(function(){ var tdArr = $(this).children(); var history_income_type = tdArr.eq(0).find('input').val();//收入类别 var history_income_money = tdArr.eq(1).find('input').val();//收入金额 var history_income_remark = tdArr.eq(2).find('input').val();// 备注  alert(history_income_type);
        alert(history_income_money);
        alert(history_income_remark);

    });

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：博客园

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

<!-- datatables样式和bootstrap支持样式 --> <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css"> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!--form ajax提交--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.js"></script> 

<!-- search 框start --> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="用户姓名" name="userName" id="searchUserName"> </div> & <div class="form-group"> <input type="text" class="form-control" placeholder="律所名" name="officeName" id="searchOfficeName"> </div> & <div class="form-group"> <input type="number" class="form-control" placeholder="状态" name="be_valid" id="searchValid"> </div> <button type="button" class="btn btn-success" onclick="searchData()">搜索</button> </form> <form class="navbar-form navbar-right"> <button type="button" class="btn btn-primary btn-sm btn-warning" data-toggle="modal" data-target="#addModal"> 新增律所 </button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <!-- search 框end --> <div class="container"> <table id="mytable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%" style="white-space: nowrap;"> <thead> <tr> <th>用户名</th> <th>用户ID</th> <th>邮箱</th> <th>身份</th> <th>律所</th> <th>律所id</th> <th>律所简报</th> <th>律所创建时间</th> <th>限制人数</th> <th>验证码</th> <th>状态</th> <th>备注信息</th> <th>操作</th> </tr> </thead> <tbody></tbody> <tfoot> <tr> <th>用户名</th> <th>用户ID</th> <th>邮箱</th> <th>身份</th> <th>律所</th> <th>律所id</th> <th>律所简报</th> <th>律所创建时间</th> <th>限制人数</th> <th>验证码</th> <th>状态</th> <th>备注信息</th> <th>操作</th> </tr> </tfoot> </table> </div>

<script type="text/javascript"> var oTable;
    $(function(){ LoadData();
    }); function searchData(){
        oTable.draw(true); // oTable.ajax.reload(null,true);  }function LoadData() {
         oTable = $('#mytable').DataTable({ //sDom: 'T<"clear">lfrtip',  oLanguage: {
                sZeroRecords: "对不起，查询不到任何相关数据",
                sInfoEmpty: "记录数为0" },
            sScrollX: "100%",
            sScrollXInner: "110%",
            bScrollCollapse: false, //可滚动 bDestory: true, //数据允许清空 bServerSide: true, //服务端处理分页 bLengthChange: false, //是否允许自定义每页显示条数. iDisplayLength: 20, //每页显示10条记录 bPaginate: true, //是否分页 //sPaginationType: "amaze", //分页样式   "full_numbers" //bJQueryUI: true,//是否将分页样式应用到表格 bProcessing: true, //当datatable获取数据时候是否显示正在处理提示信息。 bFilter: false, //是否启用条件查询 bSearchable: false, //bStorable: false,//是否启用列排序 //bInfo: true, //是否显示分页信息(页脚信息) order: [[7, "desc"]], //默认按照第几列排序,从1开始 bAutoWidth: false, //自动宽度 bStateSave: true, //状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容  ajax:{
                 dataType:'json',
                 type:'POST',
                 url: '/adminUserList',
                 headers: { 'token': window.localStorage.token //取localStorage中的token，用来做安全校验
                 },
                 dataSrc: "aaData",
                 data:function(d){
　　　　　　　　　　　　　//取搜索的参数值,在请求服务端时,附加到请求参数中 var userName=$('#searchUserName').val(); var officeName=$('#searchOfficeName').val(); var be_valid=$('#searchValid').val();

                     d.userName=userName;
                     d.officeName=officeName;
                     d.be_valid=be_valid;
                 }
             },
            columns: [
                {
                    data: "name",
                    bSortable: false },
                {
                    data: "user_id",
                    bSortable: false },
                {
                    data: "email",
                    bSortable: false },
                {
                    data: "level_name",
                    bSortable: false },
                {
                    data: "office_name",
                    bSortable: false },
                {
                    data: "office_id",
                    bSortable: false },
                {
                    data: "officeBriefing",
                    bSortable: false },
                {   data: "office_create_time"},
                {
                    data: "limited_num",
                    bSortable: false },
                {
                    data: "verify_code",
                    bSortable: false },
                {
                    data: "be_valid",
                    bSortable: false },
                {
                    data: "remark",
                    bSortable: false },
                {
                    data: null,
                    render: function (data, type, row) { return '<button type="button" class="btn btn-primary btn-sm" onclick="editShow(\''+data.user_id+'\')">编辑</button>'; },
                    bSortable: false }
            ]
        });

    } </script>

@ResponseBody
    @RequestMapping(value = "/adminUserList",method = RequestMethod.POST) public AjaxListResponseDTO<AppUserShowDTO> getAdminUserList(
            @ApiParam(required = true, name = "start", value = "开始条数") @RequestParam Integer start,
            @ApiParam(required = true, name = "length", value = "取多少条") @RequestParam Integer length,
            @ApiParam(required = true, name = "userName", value = "用户名") @RequestParam String userName,
            @ApiParam(required = true, name = "officeName", value = "律所名") @RequestParam String officeName,
            @ApiParam(required = true, name = "be_valid", value = "状态") @RequestParam Integer be_valid,
            HttpServletRequest request) throws Exception{// Map<String,String[]> paramMap=request.getParameterMap();  String[] orderTypeArr=request.getParameterValues("order[0][dir]");
        String lawOfficeOrderType=""; if(null!=orderTypeArr){
            lawOfficeOrderType=orderTypeArr[0];
        }

        AjaxListResponseDTO<AppUserShowDTO> responseDTO=new AjaxListResponseDTO<>(); //datatable.js 相关参数 String[] drawStrArr=request.getParameterValues("draw"); if(null!=drawStrArr){
            responseDTO.setSEcho(Integer.parseInt(drawStrArr[0]));
        }

        Page<AppUserShowDTO> appUserShowDTOPage = authUserService.findAllUserAndLawOffice(userName,officeName,be_valid,null!=start?start:0,null!=length?length:20,lawOfficeOrderType,"超级管理员");

        responseDTO.setITotalRecords((int) Math.ceil(appUserShowDTOPage.getTotal()));//实际需要传数据总数,此处值不对
        responseDTO.setITotalDisplayRecords((int) Math.ceil(appUserShowDTOPage.getTotal()));
        responseDTO.setAaData(appUserShowDTOPage.getResult()); return responseDTO;
    }

/** * Created by xinhuiyang on 2017/6/9. */ @Data public class AjaxListResponseDTO<T>{ private Integer sEcho; private Integer iTotalRecords; private Integer iTotalDisplayRecords; private List<T> aaData;
}

<!-- 固定列 插件js -->
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>

oTable = $('#mytable').DataTable({ //sDom: 'T<"clear">lfrtip',  oLanguage: {
                sZeroRecords: "对不起，查询不到任何相关数据",
                sInfoEmpty: "记录数为0" },
            sScrollX: "100%",
            sScrollXInner: "110%",
            bScrollCollapse: false, 
            fixedColumns: { //固定列的配置项 leftColumns: 1, //固定左边第一列 rightColumns:1 //固定右边第一列  },
            bDestory: true, 
            bServerSide: true, 
            .....省略......

/** * Created by xinhuiyang on 2017/6/9. */ @Data
@ApiModel public class AjaxListResponseDTO<T>{

    @ApiModelProperty("必要。上面提到了，Datatables发送的draw是多少那么服务器就返回多少。 这里注" +
            "意，作者出于安全的考虑，强烈要求把这个转换为整形，即数字后再" +
            "返回，而不是纯粹的接受然后返回，这是 为了防止跨站脚本（XSS）攻击。") private Integer draw;

    @ApiModelProperty("必要。即没有过滤的记录数（数据库里总共记录数）") private Integer recordsTotal;

    @ApiModelProperty("必要。过滤后的记录数（如果有接收到前台的过滤条件，则返回的是过滤后的记录数）") private Integer recordsFiltered;

    @ApiModelProperty("必要。表中中需要显示的数据。这是一个对象数组，也可以只是" +
            "数组，区别在于 纯数组前台就不需要用 columns绑定数据，会自动按照顺序" +
            "去显示 ，而对象数组则需要使用 columns绑定数据才能正常显示。") private List<T> aaData;

    @ApiModelProperty("可选。你可以定义一个错误来描述服务器出了问题后的友好提示") private String error;
}

 @ResponseBody
    @RequestMapping(value = "/adminUserList",method = RequestMethod.POST) public AjaxListResponseDTO<AppUserShowDTO> getAdminUserList(
            @ApiParam(required = true, name = "start", value = "开始条数") @RequestParam Integer start,
            @ApiParam(required = true, name = "length", value = "取多少条") @RequestParam Integer length,
            @ApiParam(required = true, name = "userName", value = "用户名") @RequestParam String userName,
            @ApiParam(required = true, name = "officeName", value = "律所名") @RequestParam String officeName,
            @ApiParam(required = true, name = "be_valid", value = "状态") @RequestParam Integer be_valid,
            HttpServletRequest request) throws Exception{ // Map<String,String[]> paramMap=request.getParameterMap();  String[] orderTypeArr=request.getParameterValues("order[0][dir]");
        String lawOfficeOrderType=""; if(null!=orderTypeArr){
            lawOfficeOrderType=orderTypeArr[0];
        }

        AjaxListResponseDTO<AppUserShowDTO> responseDTO=new AjaxListResponseDTO<>(); //datatable.js 相关参数 String[] drawStrArr=request.getParameterValues("draw"); if(null!=drawStrArr){
            responseDTO.setDraw(Integer.parseInt(drawStrArr[0]));
        } int totalCountBeforeFilter=authUserService.countUserByLevel("超级管理员");

        Page<AppUserShowDTO> appUserShowDTOPage = authUserService.findAllUserAndLawOffice(userName,officeName,be_valid,null!=start?start:0,null!=length?length:20,lawOfficeOrderType,"超级管理员");

        responseDTO.setAaData(appUserShowDTOPage.getResult());
        responseDTO.setRecordsTotal(totalCountBeforeFilter);
        responseDTO.setRecordsFiltered((int) appUserShowDTOPage.getTotal()); return responseDTO;
    }