CMSM

Alokasi Air Petak Tersier

Panca:

No.	Tanggal	Idx	Nama Ruas	Debit Perintah
377	2025-05-26	31	B.Pl 2 - B.Pl 3	617.41
378	2025-05-26	31	B.P 1 - P.1 ka	16.58
379	2025-05-26	31	B.P 1 - B.P 2	2995.78
380	2025-05-26	31	B.Kl 1 - Kl.1 ka	22.75

Use custom template

<div class="panel" style="width:1100px">
    <div class="panel-header d-flex align-items-center px-2">
        <div class="icon fn-6"><i class="fa-regular fa-list fa-lg"></i></div>
        <div class="title flex-grow-1">Alokasi Air Petak Tersier</div>
         <div class=""></div>
      <div class="fn-6" style="color:#fff;">Panca: <select id="selPanca" class="bg-black input select"></select></div>
    </div>
    <div class="panel-body p-4">
        <table class=" d-none listing table table-striped">
            <thead><tr class="trth"><th class="sorting" idp="24" dh="id">No.</th>
                <th class="sorting" idp="24" dh="tanggal">Tanggal</th>
                <th class="sorting" idp="24" dh="idx">Idx</th>
                <th class="sorting" idp="24" dh="nama_ruas">Nama Ruas</th>
                <th class="sorting" idp="24" dh="debit_perintah">Debit Perintah</th></tr></thead>
        <tbody>

<tr class="trtd" data_id="{ID}"><td class="no">{NO}</td>
                <td class="tanggal">{!tanggal!}</td>
                <td class="idx">{!idx!}</td>
                <td class="nama_ruas">{!nama_ruas!}</td>
                <td class="debit_perintah">{!debit_perintah!}</td></tr>
      
        
        </tbody>
        </table></div>
   <div class="panel-footer p-2"><div class=" d-none text-center">{!PAGING!}</div></div>
</div>
<script>
  
  function loaddata(panca){
    
    let setpanca='';
    if(panca > 0){
      setpanca='/panca/'+panca;
    }
     console.log(setpanca);
   $.post('{!BASE_URL!}cms/mdl/laporan/alokasi_tersier'+setpanca,function(data){
     //--
            console.log(data);

if(data.listdata){
     	$('.panel-body').html(data.listdata);
        let maxpanca=data.maxpanca;
       let panca = data.panca;
       let opsi;
       let select="";
        for(i=1; i<=maxpanca; i++){
          //--
          if(panca==i) select = 'selected';
          opsi +='<option value="'+i+'" class="text-center" '+select+'>'+i+'</option>';
          select="";
        }
       $('#selPanca').html(opsi);
       
       $('#selPanca').change(function(){
            let panca = $(this).val();
          loaddata(panca);
         
       });
     }
   },'JSON');
  }
  loaddata(0);
  
</script>

<div class="panel">
    <div class="panel-header d-flex align-items-center px-2">
        <div class="icon fn-6"><i class="fa-regular fa-list fa-lg"></i></div>
        <div class="title flex-grow-1">Dd Debit Ruas Panca</div>
    </div>
    <div class="panel-body">
        <table class="listing table table-striped">
            <thead><tr class="trth"><th class="sorting" idp="24" dh="id">No.</th>
                <th class="sorting" idp="24" dh="tanggal">Tanggal</th>
                <th class="sorting" idp="24" dh="idx">Idx</th>
                <th class="sorting" idp="24" dh="nama_ruas">Nama Ruas</th>
                <th class="sorting" idp="24" dh="debit_perintah">Debit Perintah</th></tr></thead>
        <tbody>

Title
SubTitle
Table Property
Sub From
On Click
Optional Setting
Icon
Hidden

List Modul