Mewujudkan header 'LIST DATATABLE' yang ada paging

LANGKAH-LANGKAH

1. Create table boostrap yang mengandungi fungsi Paging.

   Contoh seperti dibawah :

     $this->table->set_heading(array(
        array('data'=>'BIL','class'=>'text-center'),
        array('data'=>'NAMA','class'=>'text-center')
        ));

2. Untuk masukkan header pada "List DataTable", tambah kod program baru seperti
   dibawah.

  $this->table->add_row(array(                   
        array('data'=>'<strong><font color="black">'.$showDaerah['keterangan'].'</strong>', 'class'=>'text-left', 'style' => 'background-color: Silver;','colspan'=>'2'),           
        array('data'=>'<strong><font color="black"></strong>', 'class'=>'hide', 'style' => 'background-color: Silver;'),
        array('data'=>'<strong><font color="black"></strong>', 'class'=>'hide', 'style' => 'background-color: Silver;'),
 )); 

3. Setelah itu, reload page anda, dan tengok hasilnya. Sekian.

 


  

Read More

Mesej Confirmation Menggunakan "Popovers"

LANGKAH-LANGKAH 

1. Wujudkan button untuk tujuan pengesahan.

   contoh : <button name="btnTrans" id="btnTrans" title="Hapus Data ?"  
data- toggle="hapus_rekod" class="btn btn-small btn-primary"  type="button" >
                <i class="fa fa-save"></i> Hapus Rekod</button>

2 . Wujudkan attribute nama bagi "data- toggle"  button seperti diatas.

3. Wujudkan function untuk memanggil attribute nama "data-toggle" button tersebut.

   contoh function :

$('[data-toggle=hapus_rekod]').popover({
    //$('#sub1').popover({
                    
    content : 'Adakah anda pasti? <br><br><button type="button" class="hantarTIDAK btn btn-default">Tidak</button> <button type="submit" class="hantarDATA btn btn-danger">Ya</button>',

    template : '<div class="popover" role="tooltip"><div class="arrow"></div><h4 class="popover-header" style="background-color:#d9534f; color:#fff"></h4><div class="popover-body"></div></div>',
    html: true,
    placement: "top",
    trigger : "focus"
})
.on("shown.bs.popover", function () {

    formID = $(this).closest('form').attr('id');

    $("button.hantarDATA").on("click", function(){
      console.log(formID);
        $('#'+formID).submit();
    });

    $("button.hapusTIDAK").on("click", function() {

        $(".popover").popover("hide");
    });



});

4.  Setelah selesai, reload page, dan cuba klik pada button tersebut. Anda akan melihat
     hasilnya.Sekian.

Read More

Validation Untuk Tarikh Min - Max

Di sini akan memaparkan cara untuk membuat date validation

$('#txtTarikhAkhirPapar').change(function(){
        var startDate = '';
        var endDate = '';
       
        startDate = document.getElementById("txtTarikhMulaPapar").value;
        endDate = document.getElementById("txtTarikhAkhirPapar").value;

        if ( (Date.parse(startDate) > Date.parse(endDate)) )
        {
            alert("Tarikh Akhir Yang Dipilih Adalah Sebelum Tarikh Mula. Sila Pilih Tarikh Semula.");
        }
    });

Disediakan oleh: Mohd Fadil bin Md Sari

Read More