Question 61348 in Twitter Bootstrap Question posted in

How to add button google search in this form?-Twitter bootstrap

Hi there can someone help me, I want every keyword list, there is a google search button, and when I click on it, it will open a new browser tab, can anyone help me, I don’t understand coding at all, so I ask for help here, I’m attaching a screenshot, thank you

Screenshot

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>TRENDING</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- <style type="text/css"> -->
        <!-- h3 span { -->
            <!-- font-size: 22px; -->
            <!-- margin-left: auto; -->
            
        <!-- } -->
        <!-- h3 input.search-input { -->
            <!-- width: 100px; -->
            <!-- margin-left: auto; -->
            <!-- float: right -->
        <!-- } -->
        <!-- .mt32 { -->
            <!-- margin-top: 32px; -->
        <!-- } -->
    <!-- </style> -->

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">    
    
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body class="mt32">
    <!-- <div class="container"> -->
        <!-- <h3> -->
        <!-- <span>RESULT</span> -->
        <!-- </h3> -->
    <!-- </div> -->
    
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse</td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>


</body>
</html>
Tags:

2

Answers


  1. 0 
    <!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>TRENDING</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- <style type="text/css"> -->
        <!-- h3 span { -->
            <!-- font-size: 22px; -->
            <!-- margin-left: auto; -->
            
        <!-- } -->
        <!-- h3 input.search-input { -->
            <!-- width: 100px; -->
            <!-- margin-left: auto; -->
            <!-- float: right -->
        <!-- } -->
        <!-- .mt32 { -->
            <!-- margin-top: 32px; -->
        <!-- } -->
    <!-- </style> -->

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">    
    
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <script> $(document).ready(function() {$('table').DataTable();} ); </script>
</head>
<body class="mt32">
    <!-- <div class="container"> -->
        <!-- <h3> -->
        <!-- <span>RESULT</span> -->
        <!-- </h3> -->
    <!-- </div> -->
    
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">keyword</th>
<th title="Field #2">products</th>
<th title="Field #3">date</th>
</tr></thead>
<tbody><tr>
<td>smooth operator <a target="_blank" style="font-size:70%" class="py-0 btn btn-primary btn-sm" href="//www.google.com/search?q=smooth operator">Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
<tr>
<td>horse <a target="_blank" style="font-size:70%" class="py-0 btn btn-primary btn-sm" href="//www.google.com/search?q=horse" >Google search</a></td>
<td align="right">583</td>
<td align="right">1642435207616</td>
</tr>
</tbody></table>


</body>
</html>
    Login or Signup to reply.
  2. 0

    Here is an example –

    note I cannot use the drawCallback but need to use on("draw" PLUS a draw() to make sure the buttons are also added on the next page of the pagination

    drawCallback is called for EACH row, so this code is not useful

    $table = $(‘table’).DataTable({"drawCallback": addButtons})

    The opening of the window is blocked here at SO but works in the
    jsfiddle

    const addButtons = settings => {
  $('#dt1 tr td:nth-child(1)').html(function() {
    return `<button type="button" title="google search" class="py-0 btn btn-dark btn-sm search">${this.innerText}</button>`
  })
  $('#dt1 tr td:nth-child(4)').html(function() {
    return `<button type="button" title="google trends" class="py-0 btn btn-secondary btn-sm trends">${this.innerText}</button>`
  })
};

$(document).ready(function() {
  $table = $('table').DataTable();
  $table.on("draw", addButtons)
  $table.rows().invalidate().draw(); // not sure WHY I need to do this to have the FIRST draw trigger

  $table.on("click", ".search", function() {
    window.open(`https://google.com/search?q=${this.innerText}`, '_blank');
  })
  $('tbody').on("click", ".trends", function() {
    window.open(`https://trends.google.com/trends/explore?date=now 7-d&geo=US&q=${this.innerText}`, '_blank');
  })
});
    .search, .trends {
  width: 70%;
}
    <!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>BACKUP</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">    
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <script>
</script>

</head>
<table id="dt1" class="table table-striped mt32 customers-list">
<thead><tr><th title="Field #1">Keyword</th>
<th title="Field #2">Products</th>
<th title="Field #3">Date</th>
<th title="Field #4">Google Trends</th>
</tr></thead>
<tbody><tr>
<td>golf just play it</td>
<td align="right">302</td>
<td align="right">1642887886267</td>
<td>golf just play it</td>
</tr>
<tr>
<td>go little rockstar tiktok</td>
<td align="right">980</td>
<td align="right">1642888240211</td>
<td>go little rockstar tiktok</td>
</tr>
<tr>
<td>gorila</td>
<td align="right">709</td>
<td align="right">1642888326752</td>
<td>gorila</td>
</tr>
<tr>
<td>google arts and culture</td>
<td align="right">23</td>
<td align="right">1642888331842</td>
<td>google arts and culture</td>
</tr>
<tr>
<td>goat case</td>
<td align="right">1099</td>
<td align="right">1642888338561</td>
<td>goat case</td>
</tr>
<tr>
<td>goth youtuber</td>
<td align="right">334</td>
<td align="right">1642888346327</td>
<td>goth youtuber</td>
</tr>
<tr>
<td>goots</td>
<td align="right">56</td>
<td align="right">1642888351273</td>
<td>goots</td>
</tr>
<tr>
<td>godlike</td>
<td align="right">360</td>
<td align="right">1642888743165</td>
<td>godlike</td>
</tr>
<tr>
<td>very good very nice</td>
<td align="right">3257</td>
<td align="right">1642889189771</td>
<td>very good very nice</td>
</tr>
<tr>
<td>navy blue and gold</td>
<td align="right">2613</td>
<td align="right">1642889973714</td>
<td>navy blue and gold</td>
</tr>
<tr>
<td>its a good day to read a book bookworm book dragon</td>
<td align="right">66</td>
<td align="right">1642889988276</td>
<td>its a good day to read a book bookworm book dragon</td>
</tr>
<tr>
<td>peach and goma teddy</td>
<td align="right">918</td>
<td align="right">1642889994665</td>
<td>peach and goma teddy</td>
</tr>
<tr>
<td>i paused the golden girls to be here</td>
<td align="right">91</td>
<td align="right">1642890006415</td>
<td>i paused the golden girls to be here</td>
</tr>
</tbody></table>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search