SHARE
TWEET

Untitled

a guest Feb 13th, 2017 338 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <link rel="stylesheet" type="text/css" href="misc/global/plugins/bootstrap/css/bootstrap.min.css">
  6.     <link rel="stylesheet" type="text/css" href="misc/global/plugins/datatables/css/dataTables.bootstrap.min.css">
  7.     <script type="text/javascript" src="misc/global/plugins/jquery.min.js"></script>
  8. </head>
  9. <body>
  10. <div class="container">
  11.   <div class="row">
  12.     <div class="col-md-12">
  13.       <table class="table table-striped table-bordered table-hovered" id="displayData">
  14.       </table>
  15.     </div>
  16.   </div>
  17. </div>
  18. <script type="text/javascript">
  19. $(function(){
  20.  
  21.   var globalVars = {
  22.       tableConfigs: null,
  23.       tableId:$('table#displayData')
  24.   }
  25.  
  26.   var main = {
  27.       register: function(){
  28.         main.UI.register.apply();
  29.         main.EVENTS.register.apply();
  30.       },
  31.       UI: {
  32.         register: function(){
  33.           main.UI.buildTable.apply();
  34.         },
  35.         buildTable: function(){
  36.           globalVars.tableConfigs = globalVars.tableId.dataTable( {
  37.               "bProcessing": true,
  38.               "bServerSide": true,
  39.               "sAjaxSource": 'a.cfc?method=dataTable',
  40.               columns:
  41.                       [   { title:'ID',name:"Account_Id" },
  42.                           { title:'Account Name',name:"Account_Name" },
  43.                           { title:'Account Address',name:"Account_Address1" },
  44.                           {
  45.                                 title: "Action",
  46.                                 orderable: false,
  47.                                 data: null,
  48.                                 class: "dt-head-center",
  49.                                 defaultContent: [
  50.                                     "<center>",
  51.                                     "<div class=\"btn-group\">",
  52.                                     "<button title=\"Select Detail Data\" type=\"button\" data-tag=\"pilih\" class=\"btn btn-info btn-sm\">&nbsp<i class='glyphicon glyphicon-ok'></i></button>",
  53.                                     "</div>",
  54.                                     "</center>"
  55.                                 ].join(""),
  56.                                 width: "150px"
  57.                             }
  58.                       ]
  59.           });
  60.         }
  61.       },
  62.       ROUTINES: {
  63.         register: function(){
  64.           main.ROUTINES.getSelectedRow.apply();
  65.         },
  66.         getSelectedRow: function(obj){
  67.           return {
  68.                     index : $(obj).closest('tr').index(),
  69.                     data: globalVars.tableId.dataTable().fnGetData($(obj).closest('tr').index())
  70.                   }
  71.         }
  72.       },
  73.       EVENTS: {
  74.         register: function(){
  75.           main.EVENTS.eventButtonRow.apply();
  76.         },
  77.         eventButtonRow: function(){
  78.           globalVars.tableId
  79.                   .on('preXhr.dt', function(e, setting, data) {
  80.                     console.log(data);
  81.                   })
  82.                   .on('xhr.dt', function(e, setting, data) {
  83.                   })
  84.                   .on('draw.dt', function() {
  85.                       main.EVENTS.gridBtnTable.apply();
  86.                   });
  87.         },
  88.         gridBtnTable: function(){
  89.           var oBtn = $('button[data-tag="pilih"]');
  90.               oBtn.unbind().bind('click',function(){
  91.                 var that = $(this).attr('data-tag');
  92.                   if(that=='pilih'){
  93.                     var data = main.ROUTINES.getSelectedRow($(this));
  94.                     console.log(data); //GET POSITION ID DATA AND ALL DATA
  95.                     console.log(data.data[1]); //SEPCIFIK DATA YOU CHICE
  96.                   }
  97.               });
  98.         }
  99.       }
  100.   } //END MAIN
  101.  
  102.   main.register.apply();
  103. });
  104. </script>
  105.  
  106. <script type="text/javascript" src="misc/global/plugins/bootstrap/js/bootstrap.min.js"></script>
  107. <script type="text/javascript" src="misc/global/plugins/datatables/js/jquery.dataTables.min.js"></script>
  108. <script type="text/javascript" src="misc/global/plugins/datatables/js/dataTables.bootstrap.min.js"></script>
  109. </body>
  110. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top