jquery表格插件DataTables的ajax请求数据

最新推荐文章于 2023-03-06 22:30:00 发布

yGIS

最新推荐文章于 2023-03-06 22:30:00 发布

阅读量2.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u010608964/article/details/85108601

版权

javascript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

今天将主要部署了后台服务，安装tomcat，mysql配置、和设置环境。然后试着写了一个接口将数据在前台中展示，这里有很多的用户上传了数据，目前需要用于在表格上显示即可。我这里这里使用了datatablse这个插件，不得不说这个插件还是挺强大。

来看一下服务接口中返回的数据。具体如下图所示。

这些数据都是移动端采集回传到数据库中的。

好了现在来看一下使用datatable来展示的效果。

之前也使用过datatable,这里将代码精简了一下，最后来看一下实现的代码。

$(function(){

    var url_fixradiopoint="http://192.168.10.110:8080/fixradio/getAllFixRadioPoint.do";
   
    var mapkeySet={"mc":"名称","lx":"类型","fsbj":"辐射半径","gl":"功率","mj":"面积","jlsj":"建立时间","xx":"象限","bz":"备注","lrsj":"上传时间"};


    var tmpSetting=getTableSetting(url_fixradiopoint,mapkeySet);
        /*额外增加一行，用于按钮的显示*/
        tmpSetting.aoColumns.push(getItemAoColumns("lrsj","详细信息"));
        /*添加按钮*/
        tmpSetting.columnDefs.push(getItemColumnDefs("contact",-1,"点位信息"));
    
    var tables=$("#tb_fixradio").DataTable(tmpSetting)

    function getTableSetting(ajaxurl,mapkey){
      var setting={
        "processing": true,
        "sAjaxSource":ajaxurl,
        "autoWidth":true,
        "bPaginate":true,
        "bStateSave":true,
        "language": {
           'lengthMenu': '每页显示 _MENU_ 记录', 
           'zeroRecords': '没有数据 - 抱歉', 
           'info':' 第_PAGE_ 页/共 _PAGES_页', 
           'infoEmpty': '没有符合条件的记录', 
           'search': '查找', 
           'infoFiltered': '(从  _MAX_ 条记录中过滤)', 
           'paginate':{ "first":  "首页 ", "last": "末页", "next": "下一页","previous": "上一页"} 
        },
        "retrieve":true,
        "paging":true,
        "ordering":true,
        "info":true,
        "aoColumns":[],
        "columnDefs":[]
      }

      for (var key in mapkey) {
        var value=mapkey[key];
        setting.aoColumns.push(getItemAoColumns(key,value));
      }
      return setting;
    }

    function getItemAoColumns(key,value){
        var item={
                       "mDataProp":key,
                       "sTitle":value,
                       "sDefaultContent":"",
                       "sClass":"center"
                  }
        return item;
       
    }

    /**/
    function getItemColumnDefs(strId,indexFlag,strBtnName){
      var item= {render:function(data, type, row){
              return '<div class="col-xs-12">' +
                    '<button id=strId type="button" class="btn btn-success btn-block btn-xs" style="min-width: 32px">'+strBtnName+'</button>' +
                    '</div>';
            },targets: indexFlag 
           }
      return item;     
    }

})