DataTable 分頁多項選取 Checkbox.

當DataTable資料接回來時候 需做的動作

//初始化的前20筆   
function GetOrderTtrNoCount20()
{

  var data =
  {    
    "CusNo":Account
  };
  var sendData =
  {
    "value":JSON.stringify(data)
  }
  $.ajax(
    {
      url: "Your URL",
      type: "post",
      data:sendData,
      datatype: 'jsonp',
      success: function(data)
      {
         //如果資料回傳為 NoData 我則不做動作(NoData是我預設無值時後回傳)
        if(jQuery.parseJSON(data) != "NoData")
        {
          //宣告要接收資料的陣列
          arcTtrNo = new Array();
          //將資料轉換出來存放至陣列
          arcTtrNo =   jQuery.parseJSON(data);
          //先判斷是否DataTable已經使用 如有責清除
          if ( $.fn.dataTable.isDataTable( '#mytable' ) )
          {
            $('#mytable').DataTable().destroy();
          }
          //要繪製成TABLE用來存放的變數
          var DtTree ="";
          for(var i = 0 ; i < arcTtrNo.length ; i++)
          {
            //繪製TABLE
            var strTemp = '';
                strTemp+='<tr><td>'+arcTtrNo[i]["PickupDat"]+'</td>';
                strTemp+='<td>'+arcTtrNo[i]["RelTtrSno"]+'</td>';   
                strTemp+='<td>'+arcTtrNo[i]["Nti"]+'</td>';  
                strTemp+='<td>'+arcTtrNo[i]["AgSqr"]+'</td>';
                strTemp+='<td>'+arcTtrNo[i]["AgSqrAdr"]+'</td>';
                strTemp+='<td>'+arcTtrNo[i]["Money"]+'</td>';
  
                //在Checkbox 宣告時候 ，加入onChange並加入當下陣列索引參數.
                strTemp+= '<td><input type="checkbox" name="id[]" value="'+ i+ '" onchange="fun_chk_change('+i+')" ></td>';                 
                strTemp+='</td></tr>';
            DtTree+=strTemp;

            //帶入預設值 false 未選取  主要是用來記錄使用者是否選取過
            arcTtrNo[i]["SelectCheck"] = false;
          }
          $('#MyContent1').html(DtTree);
          //套上DataTable 並預設排序
          $('#mytable').DataTable(
            {
              "order": [0,'desc']
            });
        }
        else
        {
          //如果沒資料
          $('#MyContent1').html("");
          alert('查无资料');
        }
       
      },
      error:function()
      {
        alert("<?=$this->lang->line('OSNetIsConnErr')?>");
      });

}

 

使用者選取分頁變動時候

//分頁畫面變動時候 把值 set 回去
  $('#mytable').on( 'draw.dt', function () 
  {
    //取出DataTable裡面 元素是 checkbox的
    var Data = $('#MyContent1  input:checkbox').each(function ()
      {			
        //取得目前索引位置  跟原始陣列判斷是否重複
        var vValue = $(this).val().toString();				
      
        //原始陣列索引比對 看是否勾選過 如有就打勾(選取)
        for(var i = 0 ; i < arcTtrNo.length ; i++)
        {
          //如果兩個索引相同
          if(i.toString() ==vValue)
          {
             //因為有選取過，所以要將此chekbox 的 checked  = true;
            $(this).context.checked = arcTtrNo[i]["SelectCheck"];
            //因為只會比對到一次 即可退出 增加速度
            break;
          }
        }		
      });
  } );

取得使用者有選取的Checkbox.

//取得變更值
function fun_chk_change(IndexNum)
{
   //跑原始陣列
  for(var i = 0; i < arcTtrNo.length; i++)
  {
    //如果跟使用者選取相同
    if(i == IndexNum)
    {
      
      var onOff = arcTtrNo[i]["SelectCheck"].toString();
      //判斷當下是什麼 將值修改
      if(onOff == "true")
      {
        arcTtrNo[i]["SelectCheck"] = false;
      }
      else
      {
        arcTtrNo[i]["SelectCheck"] = true;
      }
    }
  }
}

取出所有選取的checkbox的相關值

function SelectAll()
  {
    //宣告要存放的陣列
    arcAll=new Array();  
    var d=0;
    //原始陣列
    for (var i=0; i <arcTtrNo.length; i++) 
    {
       //如果此物件欄位為 true 則執行紀錄
      if(arcTtrNo[i]["SelectCheck"])
      { 
        //除此方式可使用 push 直接將所需值丟入.      
        arcAll[d]=arcTtrNo[i]["RelTtrSno"];

        d++;
      }
    }
}