最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to get complete data from (html) bootstrap table when pagination is turned on - Stack Overflow

programmeradmin5浏览0评论

I am using bootstrap table in my web page and want to get plete textual data from all table cells, when pagination is on. I have tried the following method and it returns all the data:

var data = $('#' + tableID).bootstrapTable('getData')

Now when i traverse data object to get value for every cell it works fine but, for those cells which have some nested html , for example:

   <td class="danger">cell 4</td>
   <td>
   <a href="">google</a>
   </td>

Now, in this case, i want to get value for second cell as google but it returns me whole html as

 <a href="">google</a>

Any idea, how i can get only textual value.

I can't do any server side operation, I have to achieve this using javascript/jquery. I have also tried using jquery:

function getColData(tableID,colIndex) {
    var colArray = $('#' + tableID + ' td:nth-child'+'('+colIndex+')').map(function(){
           return $(this).text();
       }).get();
       return colArray
    }

it returns data correctly but only which is visible on active page and i want all the data.

I am using bootstrap table in my web page and want to get plete textual data from all table cells, when pagination is on. I have tried the following method and it returns all the data:

var data = $('#' + tableID).bootstrapTable('getData')

Now when i traverse data object to get value for every cell it works fine but, for those cells which have some nested html , for example:

   <td class="danger">cell 4</td>
   <td>
   <a href="https://www.google.">google</a>
   </td>

Now, in this case, i want to get value for second cell as google but it returns me whole html as

 <a href="https://www.google.">google</a>

Any idea, how i can get only textual value.

I can't do any server side operation, I have to achieve this using javascript/jquery. I have also tried using jquery:

function getColData(tableID,colIndex) {
    var colArray = $('#' + tableID + ' td:nth-child'+'('+colIndex+')').map(function(){
           return $(this).text();
       }).get();
       return colArray
    }

it returns data correctly but only which is visible on active page and i want all the data.

Share Improve this question edited Jun 27, 2016 at 11:42 TechMaster asked Jun 27, 2016 at 11:31 TechMasterTechMaster 2611 gold badge2 silver badges13 bronze badges 5
  • can you please add your code in jsfiddle? – Harsh Sanghani Commented Jun 27, 2016 at 11:44
  • Here is the link jsfiddle/e3nk137y/7373, I added sample code and the data is shown in alert. I am unable to traverse it properly. – TechMaster Commented Jun 27, 2016 at 12:14
  • 1 stackoverflow./questions/32134884/… – Harsh Sanghani Commented Jun 27, 2016 at 12:20
  • have you seen this? – Harsh Sanghani Commented Jun 27, 2016 at 12:20
  • not really, but it also doesn't work as it involves row click event which sends the row object internally from table, but not in my case, Here i have updated code, you can see: jsfiddle/e3nk137y/7379 – TechMaster Commented Jun 27, 2016 at 12:32
Add a ment  | 

2 Answers 2

Reset to default 3

Based on your file on JSFiddle I have modified the JS part as follows, this will get you the text on every td(i.e. text or text content) and not the values of their attributes. Basically this traverses through the DOM searching for tags embedded in ones - except for those on the table header - then obtains the text value.

var table = $('#table'), button = $('#button');
button.click(function() {
  var data = [];
  table.find('tr:not(:first)').each(function(i, row) {
    var cols = [];
    $(this).find('td').each(function(i, col) {
      cols.push($(this).text());
    });
    data.push(cols);
  });
  alert(data);
});

You can see it in action here

UPDATE: This will get you all data regardless of pagination, also it will strip tags and nested tags.

var table = $('#table'), button = $('#button');

button.click(function() {
  var messedData = table.bootstrapTable('getData');
  var data = [];
  $.each(messedData, function(i, row) {
    var rowData = {
      'name': row['0'],
      'star': row['1'],
      'forks': row['2'],
      'desc': row['3'],
    }

    for (prop in rowData) {
      var tmp = document.createElement("div");
      tmp.innerHTML = rowData[prop];
      rowData[prop] = tmp.textContent || tmp.innerText || "";
    }

    data.push(rowData);
  });
  console.log(data);
});

You can see it here

Since the actual data is ing in as a string, I don't think bootstrap-table can't differentiate it from the other data. The simple solution I can think of is to use substring() to extract the data from the cells that contain custom html.

http://jsfiddle/vwg5Lefz/

The alternative is to go through the generated table <td> and use text() to get the text data from the cells.

http://jsfiddle/n0djy60v/

发布评论

评论列表(0)

  1. 暂无评论