What's new

Search

loktoy

Eternal Poster
Joined
Oct 20, 2014
Posts
1,166
Solutions
2
Reaction
103
Points
496
Age
30
pano po mafix itong search bar ko kasi kapag mag sesearch ako kung saan yun may active page lang yun lang masesearch nya lang po ang gusto ko mangyari isa lahat ng laman sa pagination ay masesearch nya kahit hindi active un pagination.. ito po code ko

<script src="../js/style.js"></script>
<script src="../js/bootstrap.bundle.js"></script>
<script src="../ajax/jquery2.js"></script>
<script src="../ajax/sweetalert2.all.js"></script>
<script src="../js/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#search').on("keyup",function(){
var value = $(this).val().toLowerCase();
$('#livesearch tr').filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) >-0);
})
})
})

sinubukan ko na rin pala yun code sa datatable.js and datatable.css.. pero same issue din..
 
Ang problema sa code mo ay ang paggamit ng .toggle() function ng jQuery. Sa kasalukuyan, ang code mo ay nagtatago ng mga rows na hindi naglalaman ng hinahanap na value, ngunit hindi naaayos ang pagination.

Upang maayos ito, maaaring subukan mong gamitin ang .hide() at .show() functions ng jQuery sa halip ng .toggle(). Narito ang inayos na code:

JavaScript:
$(document).ready(function(){
  $('#search').on("keyup",function(){
    var value = $(this).val().toLowerCase();
    $('#livesearch tr').each(function(){
      var found = false;
      $(this).find('td').each(function(){
        if ($(this).text().toLowerCase().indexOf(value) > -1) {
          found = true;
          return false; // Exit the inner loop when a match is found
        }
      });
      if (found) {
        $(this).show(); // Show the row if a match is found
      } else {
        $(this).hide(); // Hide the row if no match is found
      }
    });
  });
});

Sa naayos na code, itinatago nito ang mga rows na hindi naglalaman ng hinahanap na value at ipinapakita ang mga rows na may mga naglalaman. Ito ay ginagawa sa pamamagitan ng pag-iterate sa bawat row at cell ng table at pagche-check kung mayroong pagkakatulad sa hinahanap na value. Kung mayroong pagkakatulad, ipinapakita ang row, at kung wala, itinatago ang row.

Kung hindi pa rin gumagana ang code, maari mong subukan na tingnan ang mga error sa developer console ng browser para malaman kung may mga iba pang mga problema sa iyong code o dependencies.
 
Ang problema sa code mo ay ang paggamit ng .toggle() function ng jQuery. Sa kasalukuyan, ang code mo ay nagtatago ng mga rows na hindi naglalaman ng hinahanap na value, ngunit hindi naaayos ang pagination.

Upang maayos ito, maaaring subukan mong gamitin ang .hide() at .show() functions ng jQuery sa halip ng .toggle(). Narito ang inayos na code:

JavaScript:
$(document).ready(function(){
  $('#search').on("keyup",function(){
    var value = $(this).val().toLowerCase();
    $('#livesearch tr').each(function(){
      var found = false;
      $(this).find('td').each(function(){
        if ($(this).text().toLowerCase().indexOf(value) > -1) {
          found = true;
          return false; // Exit the inner loop when a match is found
        }
      });
      if (found) {
        $(this).show(); // Show the row if a match is found
      } else {
        $(this).hide(); // Hide the row if no match is found
      }
    });
  });
});

Sa naayos na code, itinatago nito ang mga rows na hindi naglalaman ng hinahanap na value at ipinapakita ang mga rows na may mga naglalaman. Ito ay ginagawa sa pamamagitan ng pag-iterate sa bawat row at cell ng table at pagche-check kung mayroong pagkakatulad sa hinahanap na value. Kung mayroong pagkakatulad, ipinapakita ang row, at kung wala, itinatago ang row.

Kung hindi pa rin gumagana ang code, maari mong subukan na tingnan ang mga error sa developer console ng browser para malaman kung may mga iba pang mga problema sa iyong code o dependencies.
hindi pa rin po mafix po..
kasi po halimbawa sa page 1 ay ang laman dun ay mga water, and miniral.. sa page 17 naman po ay gasul, gas, kapag mag sesearch ako sa page 1 ng gasul o gas walang lumalabas .. ngayon po kapag nasa page 17 ako isesearch ko yun gasul o gas dun lang sya nalabas gusto ko po mangyari kahit saan page ako mag search may lalabas po..
 
hindi pa rin po mafix po..
kasi po halimbawa sa page 1 ay ang laman dun ay mga water, and miniral.. sa page 17 naman po ay gasul, gas, kapag mag sesearch ako sa page 1 ng gasul o gas walang lumalabas .. ngayon po kapag nasa page 17 ako isesearch ko yun gasul o gas dun lang sya nalabas gusto ko po mangyari kahit saan page ako mag search may lalabas po..
Maaring kailangan mo baguhin ang iyong approach sa pagse-search ng data sa lahat ng mga pahina ng pagination. Ang kasalukuyang code na iyong ginagamit ay nagse-search lamang sa mga rows na kasalukuyang nakikita sa pahina ng pagination.

Para maayos ito, maaaring gawin ang mga sumusunod na hakbang:

1. Bago ang pagse-search, i-store ang lahat ng data mula sa table sa isang variable. Ito ay gagamitin upang mahanap ang mga resulta kahit saang pahina ng pagination.
2. Sa bawat pagse-search, ipakita lamang ang mga rows na may katugmang resulta sa loob ng current page ng pagination.
3. Kung ang resulta ay wala sa current page, dapat lumipat sa pahinang may resulta o i-highlight ang row na may resulta.

Narito ang inayos na code:

JavaScript:
$(document).ready(function(){
  var tableData = $('#livesearch tr');
  var currentPage = 1;
  var rowsPerPage = 10;

  $('#search').on("keyup",function(){
    var value = $(this).val().toLowerCase();
    var matchedRows = tableData.filter(function(){
      return $(this).text().toLowerCase().indexOf(value) > -1;
    });
    
    $('#livesearch tr').hide();
    
    if (matchedRows.length > 0) {
      currentPage = 1;
      showCurrentPage();
      highlightMatchedRows(matchedRows);
    }
  });

  function showCurrentPage() {
    var startIndex = (currentPage - 1) * rowsPerPage;
    var endIndex = startIndex + rowsPerPage;
    $('#livesearch tr').slice(startIndex, endIndex).show();
  }

  function highlightMatchedRows(matchedRows) {
    matchedRows.show();
    matchedRows.addClass('highlight');
  }
  
  $('#prev').click(function(){
    if (currentPage > 1) {
      currentPage--;
      showCurrentPage();
    }
  });
  
  $('#next').click(function(){
    var totalRows = $('#livesearch tr').length;
    var totalPages = Math.ceil(totalRows / rowsPerPage);
    
    if (currentPage < totalPages) {
      currentPage++;
      showCurrentPage();
    }
  });
});

Sa code na ito, nag-i-store tayo ng lahat ng data mula sa table sa variable na tableData. Tuwing magse-search, ginagamit natin ito para mahanap ang mga resulta kahit saan pahina ng pagination. Ipinapakita lamang natin ang mga rows na may katugmang resulta sa loob ng current page ng pagination at naghi-highlight tayo ng mga resulta.

Mayroon din tayong mga "Previous" at "Next" buttons na nagpapalit ng mga pahina depende sa current page at nagse-show ng tamang rows para sa bawat pahina.

Siguraduhin na mayroon kang mga "Previous" at "Next" buttons sa iyong HTML na may mga id na "prev" at "next" (e.g. <button id="prev">Previous</button>).

Sana makatulong ito sa iyo. Kung mayroon ka pang mga katanungan, huwag mag-atubiling magtanong.
 
Maaring kailangan mo baguhin ang iyong approach sa pagse-search ng data sa lahat ng mga pahina ng pagination. Ang kasalukuyang code na iyong ginagamit ay nagse-search lamang sa mga rows na kasalukuyang nakikita sa pahina ng pagination.

Para maayos ito, maaaring gawin ang mga sumusunod na hakbang:

1. Bago ang pagse-search, i-store ang lahat ng data mula sa table sa isang variable. Ito ay gagamitin upang mahanap ang mga resulta kahit saang pahina ng pagination.
2. Sa bawat pagse-search, ipakita lamang ang mga rows na may katugmang resulta sa loob ng current page ng pagination.
3. Kung ang resulta ay wala sa current page, dapat lumipat sa pahinang may resulta o i-highlight ang row na may resulta.

Narito ang inayos na code:

JavaScript:
$(document).ready(function(){
  var tableData = $('#livesearch tr');
  var currentPage = 1;
  var rowsPerPage = 10;

  $('#search').on("keyup",function(){
    var value = $(this).val().toLowerCase();
    var matchedRows = tableData.filter(function(){
      return $(this).text().toLowerCase().indexOf(value) > -1;
    });
   
    $('#livesearch tr').hide();
   
    if (matchedRows.length > 0) {
      currentPage = 1;
      showCurrentPage();
      highlightMatchedRows(matchedRows);
    }
  });

  function showCurrentPage() {
    var startIndex = (currentPage - 1) * rowsPerPage;
    var endIndex = startIndex + rowsPerPage;
    $('#livesearch tr').slice(startIndex, endIndex).show();
  }

  function highlightMatchedRows(matchedRows) {
    matchedRows.show();
    matchedRows.addClass('highlight');
  }
 
  $('#prev').click(function(){
    if (currentPage > 1) {
      currentPage--;
      showCurrentPage();
    }
  });
 
  $('#next').click(function(){
    var totalRows = $('#livesearch tr').length;
    var totalPages = Math.ceil(totalRows / rowsPerPage);
   
    if (currentPage < totalPages) {
      currentPage++;
      showCurrentPage();
    }
  });
});

Sa code na ito, nag-i-store tayo ng lahat ng data mula sa table sa variable na tableData. Tuwing magse-search, ginagamit natin ito para mahanap ang mga resulta kahit saan pahina ng pagination. Ipinapakita lamang natin ang mga rows na may katugmang resulta sa loob ng current page ng pagination at naghi-highlight tayo ng mga resulta.

Mayroon din tayong mga "Previous" at "Next" buttons na nagpapalit ng mga pahina depende sa current page at nagse-show ng tamang rows para sa bawat pahina.

Siguraduhin na mayroon kang mga "Previous" at "Next" buttons sa iyong HTML na may mga id na "prev" at "next" (e.g. <button id="prev">Previous</button>).

Sana makatulong ito sa iyo. Kung mayroon ka pang mga katanungan, huwag mag-atubiling magtanong.
wala pa rin po pero wala nman error sa console po
 
wala pa rin po pero wala nman error sa console po
Paumanhin kung hindi pa rin gumagana ang solusyon. Narito ang iba pang mga posibleng solusyon na maaaring subukan:

1. Siguraduhin na ang pagination ng iyong table ay gumagana ng maayos. Tiyakin na ang tamang bilang ng rows ang ipinapakita sa bawat pahina at na ang mga rows ay may tamang data. I-check ang mga setting at logic ng pagination.

2. Subukan ang paggamit ng ibang selector o selector chain sa pag-filter ng mga rows. Maaaring magkaroon ng problema sa pagkuha ng mga rows kung ang selector ay hindi tama. Subukan gamitin ang mga sumusunod na selector:
- $('#livesearch tbody tr')
- $('#livesearch > tbody > tr')
- $('#livesearch').find('tr')

3. Tingnan ang CSS na ginagamit para sa table at pagination. May mga pagkakataon na ang mga CSS style ay maaaring maka-apekto sa pagpapakita o pagkakatago ng mga rows. Subukan ito sa isang simpleng HTML table at i-debug ang CSS na kasama.

4. Subukan ang iba pang mga function o plugin ng pagse-search o pag-filter. Maaaring may iba pang mga available na plugin o function na mas maayos ang pag-andar para sa iyong pangangailangan.

5. Magdagdag ng breakpoints o console.log statements sa iyong code upang matsek ang mga value ng variables at masubaybayan ang flow ng code. Ito ay magbibigay sa iyo ng mas detalyadong impormasyon kung bakit hindi gumagana ang pagse-search.

Kung pagkatapos subukan ang mga solusyong ito ay hindi pa rin gumagana, maaaring mas makakatulong kung ibahagi mo ang mas detalyadong code at markup ng table at pagination mo. Ito ay magbibigay sa amin ng mas malinaw na larawan ng problema at makakatulong sa paghanap ng solusyon.
 
Paumanhin kung hindi pa rin gumagana ang solusyon. Narito ang iba pang mga posibleng solusyon na maaaring subukan:

1. Siguraduhin na ang pagination ng iyong table ay gumagana ng maayos. Tiyakin na ang tamang bilang ng rows ang ipinapakita sa bawat pahina at na ang mga rows ay may tamang data. I-check ang mga setting at logic ng pagination.

2. Subukan ang paggamit ng ibang selector o selector chain sa pag-filter ng mga rows. Maaaring magkaroon ng problema sa pagkuha ng mga rows kung ang selector ay hindi tama. Subukan gamitin ang mga sumusunod na selector:
- $('#livesearch tbody tr')
- $('#livesearch > tbody > tr')
- $('#livesearch').find('tr')

3. Tingnan ang CSS na ginagamit para sa table at pagination. May mga pagkakataon na ang mga CSS style ay maaaring maka-apekto sa pagpapakita o pagkakatago ng mga rows. Subukan ito sa isang simpleng HTML table at i-debug ang CSS na kasama.

4. Subukan ang iba pang mga function o plugin ng pagse-search o pag-filter. Maaaring may iba pang mga available na plugin o function na mas maayos ang pag-andar para sa iyong pangangailangan.

5. Magdagdag ng breakpoints o console.log statements sa iyong code upang matsek ang mga value ng variables at masubaybayan ang flow ng code. Ito ay magbibigay sa iyo ng mas detalyadong impormasyon kung bakit hindi gumagana ang pagse-search.

Kung pagkatapos subukan ang mga solusyong ito ay hindi pa rin gumagana, maaaring mas makakatulong kung ibahagi mo ang mas detalyadong code at markup ng table at pagination mo. Ito ay magbibigay sa amin ng mas malinaw na larawan ng problema at makakatulong sa paghanap ng solusyon.
pano po yun kapag nag ssearch ako tapos kapag na erase ko na po di na sa nag papakita need ko pa ireload po
 

Similar threads

Back
Top