datatable all with tip

#set($menu="menu_fee.item_charge_audit")
<script charset="utf-8" src="#springUrl('/htdocs/scripts/jquery.json-2.4.js')"></script>
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/pcode/css/appmsg_editor1cd20f.css')" />

##用于datatable功能
<!-- DataTables, TableTools and Editor CSS -->
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/DataTables-1.10.5/css/jquery.dataTables.css')">
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/DataTables-1.10.5/extensions/TableTools/css/dataTables.tableTools.css')">
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/DataTables-1.10.5/extensions/KeyTable/css/dataTables.keyTable.css')">
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/DataTables-1.10.5/extensions/Responsive/css/dataTables.responsive.css')">
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/DataTables-Editor-1.4.0/css/dataTables.editor.css')">
<link rel="stylesheet" type="text/css" href="#springUrl('/htdocs/qtip-2.2.1/jquery.qtip.css')">

<!-- jQuery, DataTables, TableTools and Editor Javascript -->
<script charset="utf-8" src="#springUrl('/htdocs/DataTables-1.10.5/js/jquery.dataTables.js')"></script>
<script type="text/javascript" src="#springUrl('/htdocs/DataTables-1.10.5/extensions/TableTools/js/dataTables.tableTools.js')"></script>
<script type="text/javascript" src="#springUrl('/htdocs/DataTables-1.10.5/extensions/KeyTable/js/dataTables.keyTable.js')"></script>
<script type="text/javascript" src="#springUrl('/htdocs/DataTables-1.10.5/extensions/Responsive/js/dataTables.responsive.js')"></script>
<script type="text/javascript" src="#springUrl('/htdocs/DataTables-Editor-1.4.0/js/dataTables.editor.js')"></script>
<script type="text/javascript" src="#springUrl('/htdocs/qtip-2.2.1/jquery.qtip.js')"></script>
<div class="main_hd"> 
    <div class="title_tab" id="topTab">
        <ul class="tab_navs mt title_tab"> 
            <li class="tab_nav js_top  selected" data-id="media10"><a href="https://mp.weixin.qq.com/cgi-bin/appmsg?begin=0&count=10&t=media/appmsg_list&type=10&action=list&token=941175089&lang=zh_CN">付费审核</a></li>          
        </ul> 
    </div> 
</div> 

    
<div class="section" style="padding:20px">
    <div class="inner">
        <div class="grid_line">
            <div class="grid_item">
                                            ##付费申请
            </div>
           <div class="grid_item size1of2"> </div>
           <div class="grid_item size1of6"> </div>
           <div class="grid_item" style="display:none;">
                <select id="range">
                    <option value="week" selected>近一周</option>
                    <option value="month">近一月</option>
                    <option value="year">近一年</option>
                </select>
                <span class="lbl_content"><input id="searchKey" type="text" style="algin:right"/></span>
                <span class="lbl_content"><a class="icon16_common search_gray" style="algin:right" href="#"></a></span>
            </div>
        </div>
        <p class="editor_extra_info">
        </p>
        
        
        <h3 style="color:red; display:none" id="applyPrompt"></h3>
        <form id="userForm">
            <table id="applyAudtiTable" class="display cell-border compact hover stripe ">
                <caption><span><h3 style="float:left;margin-top:-20px;">付费申请</h3></span></caption>
                <tbody></tbody>
            </table>
        </form>
    </div>
</div>
<<style>
.right {float:right; margin-top:50px;}
</style>    
<script>
$(document).ready( function () {
	$(".icon16_common.search_gray").click(function(){
		if($("#searchKey").val().trim()==""){
			  showFail("请输入筛选关键字");
			  return;
		}
		var params = userTable.ajax.params();
		//params.searchKey = $("#searchKey").val().trim();
		//params.range = $('#range').val();
		auditTable.ajax.reload();
	});
	
	$("#range").on('change', function(){
        auditTable.ajax.reload();
    });
	var css='width:23px;height:23px;background:url("/strategy/htdocs/pcode/images/base_z.png") 0 -1968px no-repeat';
	
	/*data editor*/
	var auditEditor = new $.fn.dataTable.Editor({
		  
          ajax:function(method, url, data, success, error){
        	  console.log(data);
        	  $.ajax({
        		  type:"post",
                  dataType:"json",
                  url:"#springUrl('/strategy/charge/chargeAudiEdit.htm')",
                  data:data,
                  success:function(json){
                	  
                  },
                  error:function(xhr, error, thrown){
                	 console.log(error);// error(xhr,error, thrown);
                  }
        	  });
          },
          idSrc: "id",
          table: "#applyAudtiTable",
          fields: [
              {
                  label: "ID",
                  name: "id"
              },   
              {
                  label: "频道ID/名称",
                  name: "name"
              }, {
                  label: "收费方式:",
                  name: "price"
              }, {
                  label: "频道内容:",
                  name: "content"
              }, {
                  label: "收款方式",
                  name: "type",
                  type: "select"
              }, {
                  label: "分成比例:",
                  name: "percent",
                  type:"select",
                  options:[  { label: '1:9', value:'1:9' },   
                             { label: '2:8', value: '2:8' },
                             { label: '3:7', value:'3:7' },
                             { label: '4:6', value: '4:6' },
                             { label: '5:5', value: '5:5'},
                             { label: '6:4', value: '6:4' },
                             { label: '7:3', value: '7:3' },
                             { label: '2:8', value: '2:8' },
                             { label: '9:1', value: '9:1' },
                          ]
              }, {
                  label: "联系方式:",
                  name: "tel"
              }
          ]
    });
	/*key tab support*/
	auditEditor
    .on( 'onOpen', function () {
        // Listen for a tab key event
        $(document).on( 'keydown.editor', function ( e ) {
            if ( e.keyCode === 9 ) {
                e.preventDefault();

                // Find the cell that is currently being edited
                var cell = $('div.DTE').parent();

                if ( e.shiftKey && cell.prev().length && cell.prev().index() !== 0 ) {
                    // One cell to the left (skipping the first column)
                    cell.prev().click();
                }
                else if ( e.shiftKey ) {
                    // Up to the previous row
                    cell.parent().prev().children().last(0).click();
                }
                else if ( cell.next().length ) {
                    // One cell to the right
                    cell.next().click();
                }
                else {
                    // Down to the next row
                    cell.parent().next().children().eq(1).click();
                }
            }
        } );
    } )
    .on( 'onClose', function () {
        $(document).off( 'keydown.editor' );
    } );	
	
    // Activate an inline edit on click of a table cell
    $('#applyAudtiTable').on( 'click', 'tbody tr td', function (e) {
    	   var tdIndex2Row = $(this).parent().find("td").index($(this)[0]);  
           var tdIndex2Table = $(this).parent().parent().find("tr").index($(this).parent()[0]);  
           if(tdIndex2Row==5)  
        	   auditEditor.inline(
        			   this, 
        			   { 
        				   buttons: { label: '>', fn: function () { this.submit();      	   },
        				   blurOnBackground: true,
        				   closeOnComplete: false,
        				   submitOnReturn:true,
        				   submitOnBlur: true,
        				   onEsc: 'blur' /*close , none , submit */}
        			   } );
           
    } );
    
    function doAuditFunction(agree, nButton, oConfig, oFlash){
    	var checkList = $(":checkbox[checked='checked']");
    	var idList = new Array();
    	var ids="";
    	for(var i=0; i< checkList.length; i++){
    		if(isNaN(checkList[i].value))
    			continue;
    		
    		if(ids.length>0){
    			ids+=",";
    			ids+=checkList[i].value;
    		}else
    			ids=checkList[i].value;
    	}
    	
    	var data={isAgree:agree, idList:ids};
    	$.ajax({
            type: "POST",
            url:  "#springUrl('/strategy/charge/auditApply.htm')",
            data: {data:$.toJSON( data )},
            dataType: "json",
            cache: false,
            async: false,
            success: function(result){
                if(result.code == "error"){
                    showSuccess(result.message);
                }
                else{
                    showFail(result.message);
                }
            }
        });
    }
    
    function auditDisAgree(nButton, oConfig, oFlash){
    	doAuditFunction(false, nButton, oConfig, oFlash);
    }
    function auditAgree(nButton, oConfig, oFlash){
    	doAuditFunction(true, nButton, oConfig, oFlash);
    }
    
	
    var auditTable = $('#applyAudtiTable').DataTable({
    	/*
    	l - length changing input control
        f - filtering input
        t - The table!
        i - Table information summary
        p - pagination control
        r - processing display element
        < and > - div element 
        <"class" and > - div with a class 
        <"#id" and > - div with an ID
    	*/
    	dom:'lfrtip<"right"T>',
    	language: {
            "url": "#springUrl('/htdocs/DataTables-1.10.5/i18n/Chinese.json')",
            "decimal": ",",
            "thousands": "."
        },
        /*修改每页显示数量*/
    	lengthChange: false,
    	lengthMenu: [[20, 50, 100, -1], [20, 50, 100, "显示全部"]],
    	pageLength: 50,
    	responsive: false,
    	stateSave:false,
    	processing:true,
    	searching: false,
    	ordering:  false,
    	pagingType: "simple_numbers",
    	/*scrollY: 200,
        scrollX: true*/
    	columns: [
    	          
                    { "title": '<input type="checkbox" id="allcheckbox" data-id="all"/>全选' ,
                      "className": "dt-center",
                      "name":"id", 
                      "data":"id", 
                      "render": function ( data, type, row ) {
                          if ( type === 'display' ) {
                              return '<input type="checkbox" class="editor-active" value="'+data+'">';
                          }
                          return data;
                      }
                    },
                    { "title": "频道ID/名称" ,className: "dt-center", "name":"strategy", "data":"strategy",
                      "render": function ( data, type, row ) {
                            if ( type === 'display' ) {
                                return "<p>"+row.strategy+"</p>"+"<p>"+row.sid+"</p>";
                            }
                            return data;
                     },editField: "name" /*editor 告诉editor编辑哪个field*/
                    },
                    { "title": "频道内容" ,className: "dt-center" ,"name":"content","data":"content"},
                    { "title": "收费方式" ,className: "dt-center" ,"name":"price","data":"price",
                      "render": function ( data, type, row ) {
                            if ( type === 'display' ) {
                                var price="";
                                for(var j=0; j<row.feeList.length; j++){
                                    price+="<p>"+row.feeList[j]+"</p>";
                                }
                                return price;
                            }
                            return data;
                      }
                    },
                    { "title": "收款方式" ,className: "dt-center" , "name":"type","data":"type", defaultContentDT:""},
                    { "title": "分成比例" ,className: "dt-center" ,"name":"percent","data":"percent", 
                      "render": function ( data, type, row ) {
                          if ( type === 'display' ) {
                              return data + ' <i class="fa fa-pencil"/>';
                          }
                          return data;
                      }
                    },
                    { "title": "联系方式" ,className: "dt-center" ,"name":"tel","data":"tel" }
                  ],
        rowCallback: function( row, data ) {
                      //$('input.editor-active', row).prop( 'checked', data.active == 1 );
                      console.log('row call back');
        },
        info: false,    //控制是否显示   "显示第 1 至 2 项结果，共 2 项"
        serverSide:true,
        ajax:{
            url:"#springUrl('/strategy/charge/chargeAudit.htm')",
            dataType: "json",
            dataSrc: function( json ){
            	/*
            	##对数据预处理
            	var total ={sid:0};
            	var index=json.data.length;
                for ( var i=0, len=json.data.length ; i<len ; i++ ) {
                	total.sid+=json.data[i].sid;
                    var feeList = json.data[i].feeList;
                    var price="";
                    json.data[i].price = price;
                }
                json.data.push(json.data[4]);*/
                return json.data;
            },
            data:function(data, settings){##对提交数据进行处理
               return {data:$.toJSON(data)};  // 或者使用JSON.stringify()返回json字符串 
            },
            type:"POST"
        },
        createdRow: function ( row, data, index ) {
//          $('td', row).eq(0).addClass('highlight');
        	//$('td', row).eq(0).html('<input type="checkbox" data-id="'+data["id"]+'"/>');

        },
        createdCell: function (td, cellData, rowData, row, col) {
            if ( cellData < 1 ) {
              $(td).css('color', 'red')
            }
        },
        drawCallback: function( settings ) {
        	
        	$('.fa.fa-pencil').parent().qtip({ // Grab some elements to apply the tooltip to
                content: {
                    text: '单击编辑分成比例'
                },
                style: {
                    classes: 'qtip-red qtip-shadow qtip-rounded'
                },
                position: {
                    my: 'top left',  // Position my top left...
                    at: 'right center', // at the bottom right of...
                }
            })
            
        	var api = this.api();
        	console.log( api.rows( {page:'current'} ).data() );
        },
        initComplete: function () {
            /*var api = this.api();
            api.$('td').click( function () {
                api.search( this.innerHTML ).draw();
            } );*/
        },
        ##table tools
        tableTools: {
            aButtons: [
                {
                	sExtends:    "text",
                	fnClick: function ( nButton, oConfig, oFlash ) {
                        auditAgree(nButton, oConfig, oFlash);
                    },
                    "sButtonText": "同意",
                },
                {
                    sExtends:    "text",
                    fnClick: function ( nButton, oConfig, oFlash ) {
                    	auditDisAgree(nButton, oConfig, oFlash);
                    },
                    "sButtonText": "驳回",
                },
                /*
                "copy",
                "csv",
                "xls",
                "pdf",
                "csv",
                "select_all", 
                "select_none"
                 {
                    "sExtends": "csv",
                    "sButtonText": "保存为CSV",
                    "mColumns": [ 0, 1, 4 ]
                }
                "print",
                
                { sExtends: "editor_create", editor: auditEditor },
                { sExtends: "editor_edit",   editor: auditEditor },
                { sExtends: "editor_remove", editor: auditEditor }
                */
            ],
            "sSwfPath":"#springUrl('/htdocs/DataTables-1.10.5/extensions/TableTools/swf/copy_csv_xls_pdf.swf')",
            "sRowSelect": "os", /*single, none, os,multi*/
            //sRowSelector: '', //限制可以选中的行的selector
            "sSelectedClass": "selected"
        },
        
        /*
        ## createdRow
        
        "columnDefs": [{
            "targets": 0,
            "data": function ( row, type, val, meta ) {
              if (type === 'set') {
                row.price = val;
                // Store the computed dislay and filter values for efficiency
                row.price_display = val=="" ? "" : "$"+numberFormat(val);
                row.price_filter  = val=="" ? "" : "$"+numberFormat(val)+" "+val;
                return;
              }
              else if (type === 'display') {
                return row.price_display;
              }
              else if (type === 'filter') {
                return row.price_filter;
              }
              // 'sort', 'type' and undefined all just use the integer
              return row.price;
           },
           "render": function ( data, type, row ) {
               return data +' ('+ row[3]+')';
           },
           "createdCell": function (td, cellData, rowData, row, col) {
               if ( cellData < 1 ) {
                     $(td).css('color', 'red')
               }
           },
           
         }],
        
        drawCallBack:
        */
    });
    
    $("[data-id='all']").live("change",function(){
    	  if($(this).attr("data-id")=="all"){
    		  
              if($(this).attr("checked")){
            	  $(":checkbox").attr("checked", true);
            	  
              }else
            	  $(":checkbox").removeAttr("checked");
          }
    });
    
    /*
    ##高亮选中行背景色
    $('#applyAudtiTable tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
        	auditTable.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );*/
    ##绘制完成same as drawCallback , 可以写成table.on( 'draw', function ()
    $('#applyAudtiTable').on( 'draw.dt', function (e, settings) {
        console.log("draw table finished!");
    } );
   
/*$("[data-id='all']").click(function(e){
        
        if($(this).attr("data-id")=="all"){
            if($(this).attr("checked")==true){
                $("checkbox").attr("checked", false);
            }else
                  $("checkbox").attr("checked", true);
        }
    });
    */
    ##tooltip功能
    var lastOverIdx = null;
    $('#applyAudtiTable tbody').on( 'mouseover', 'td', function () {
        var colIdx = auditTable.cell(this).index().column;
        if(colIdx==5){
          if ( colIdx !== lastOverIdx ) {
              console.log($(this).position.x, $(this).position.y);
          }
        }
    } )
    .on( 'mouseleave', function () {
        $( auditTable.cells().nodes() ).removeClass( 'highlight' );
    } );
    ##KeyTable会有问题
    ##keyTable = new $.fn.dataTable.KeyTable( auditTable );
    
} );
</script>