Skip to main content

In-Place editing with X-Editable using Datatable plugin

In-place editing is a trending feature that can be seen in many latest web applications, a popular example would be where the editing data happens on the web page without any explicit forms or popups. Another such example I could point out is, The in-place editing is very nice in such a way that editing data seems so natural and user friendly.

To enable in-place editing, there are many free JQuery plugins available on the internet. We are discussing a very popular plugin called x-editable. Most of the time we use html tables to display data where in-place editing is enabled. Hence we need another plugin to elegantly display tables with enormous data. We use a famous JQuery plugin called datatable. Both of these plugins are used widely and free to use.

Assumption      : Bootstrap 3, JQuery used Projects

In order to enable datatable features on any ordinary table found on web page, we should initialise datatable plugin for that table. It's simply a call on the id or class selector of the table. x-editable plugin can be initialized on each field on any table that requires in-place editing. The initialization of x-editable plugin is same as datatable plugin, i.e, id or class selector of the field should be initialized with x-editable plugin. With that you are good to go in-place editing on datatable.

One of the many features provided by datatable is pagination. While we integrate x-editable plugin with datatable, often we forget to see how the plugin works on the rows that are hidden by the datatable pagination feature. Hence the in-place editing is not working on the paginated rows or in other words, the rows in the next page. To mitiage such issues, we will need to use the datatable plugin features or api to initialize the in-place editing on all rows hidden by pagination.

What we proposed to solve this issue is to use drawCallback function option on the datatable object so when each row is drawn, we can decide what should be done with the rows. In this case, we are trying to initialise x-editable plugin on all editable items/fields in all the rows of the datatable. Below is the drawCallback function used for this purpose on datatable object. You can see how the x-editable plugin is initialised on all editable items of all rows. We have used class name selector for the editable field/column.

Code Snippets
                "pagingType": "simple",
                drawCallback: function(settings){
                          var api = this.api();
                          var csrfHeader = $("meta[name='_csrf_header']").attr("content");
                          var csrfToken = $("meta[name='_csrf']").attr("content");

                          $('.editable-action', api.table().body())
                                         type : 'select',
                                         source : MAKINUSCV.baseURL + '/admin/user/list/',
                                         url : MAKINUSCV.baseURL + '/admin/user/list/do/',
                                         ajaxOptions: {
                                             beforeSend: function (xhr){ xhr.setRequestHeader(csrfHeader, csrfToken); }
                                         success : function(response, newValue) {
                                          if (response.status == 'error')
                                           return response.msg;
                             }).on('hidden', function(e, reason) {
                                   if(reason === 'save') {
                responsive: {
                       details: {
                          display: $.fn.dataTable.Responsive.display.childRowImmediate,
                          type: ''

The above solves two issues inherent on in-place editing with datatable. First, all rows on all pages are enabled with x-editable feature, and secondly, datatable dom is updated hence the sorting or search can find the updated data after editing.


  1. I have to thank you for the efforts you've put in penning this website. I am hoping to check out the same high-grade content from you in the future as well. In truth, your creative writing abilities has encouraged dev me to get my own, personal website now ;)

  2. wonderful article contains lot of valuable information. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
    This article resolved my all queries.good luck an best wishes to the team members.learn digital marketing use these following link
    Digital Marketing Course in Chennai

  3. Hi I am from Join Pak Navy I and I really like your work thanks for this information and keep it up you are doing good

  4. Roster of Sindh High Court. Check complete advocate and judge wise roster sittings. You can read more about roster of Sindh High Court.

  5. Thanks for sharing informative post. Tamil typing online is the best tool to translate Tamil to English fast and easy. Tamil typing Software download | Bamini to Unicode

  6. Thanks for your excellent article. It is so good to read a new article.
    ms excel interview questions
    hacking books

  7. It is time to clarify the continuing doubts you have about the difference between CBD Cannabis and hemp

  8. This comment has been removed by the author.

  9. The largest, including thousands more every day With games that start every second, lovePoker is the only place that collects
    poker online games from many, be it Upoker, Pppoker, PokerBros, Pokerstars, Sharkscope, Siampoker, Dafabet, IDN Poker, or well known Thai people

  10. it is not the most popular on this list, but fans do love its benefits ดูบอลฟรี . One of these is that no sign up is required, but you can sign up for free to get some convenient options. For instance, it provides intelligent content recommendations and a calendar for you to set up reminders. That way, you never miss your favorite live content. If you do miss it, though, you can always pull it up on recordings.

  11. เราคือผู้นำด้านเกมพนันออนไลน์ Major168 เราคือผู้ให้บริการ คาสิโนออนไลน์ ที่ได้รับรองว่าดีที่สุดในประเทศไทย มีค่ายเกมส์ให้เล่นมากมาย Sagaming, Sexy bacarat, Dreamgame, Ebet, Wm casino, Vivo gaming ไม่ผ่านเอเย่นต์ ระบบปลอดภัยมีทีมงานดูแลตลอด 24ชม.

    SAGAME88 แหล่งรวมเกมส์พนันออนไลน์ คาสิโนสด บาคาร่า กำถั่ว คาสิโนออนไลน์ ไฮโล รูเล็ต รับเครดิตฟรีเล่นได้ทุกเกมส์ โบนัสสมาชิกใหม่เพียบ พร้อมระบบฝากถอนออโต้ 10วิ เรามีทุกค่ายเกมส์ให้คุณเลือกเดิมพัน SA Game Sexy bacarat Dreamgame WM Casino VIVO Gaming Ebet เล่นได้ทุกเกมส์

    Our website ufabet provides betting services in the system of Auto Deposit-Withdrawal. Our members are not only in Thailand. Online football betting UEFA Bet market And this makes a guarantee that Ufabet168 is another reliable football betting website

    ufa through the website UFABET1688 a web gambling online , one that integrated all the bets from online casinos , online casino , online , and also have a game a lot more to be chosen to play such games.

  12. ufabet Online Gambling Sites The most perfect And is the most popular service in Thailand and Asia. UFABET has been set from UEFA Bet as the first and only. Online football betting website This is regarded as The best and most stable online gambling site Members praise us to be The best online betting sites based on reviews on social media. And many members Choose to use an online gambling service on our website. And of course the number of members of This online gambling site. Increase at a very high rate

  13. The best redemption option is to receive your cash back into a SunTrust Bank account. This may make the program less valuable if you want more options to maximize rewards.

  14. The amount a family receives is based on income. To qualify for the expanded child care tax payments, families must earn an adjusted gross income that does not exceed $150,000 if married and filing jointly or $75,000 for individuals. Families earning a combined adjusted gross income of more than $400,000 will see their credits incrementally reduced to less than $2,000 per child.

  15. "The cities will oftentimes tax everything you get except Social Security," says Paul Joseph, a CPA and co-owner of financial firm Joseph & Joseph Tax and Payroll in Williamston, Michigan.

  16. This comment has been removed by the author.

  17. Much obliged for sharing a Information to us. Assuming somebody need to think about Blog...

    AWS Training in Hyderabad

  18. There's also a wide range of modifiers. Tasklist -svc shows services related to each task, use tasklist -v to obtain more detail on each task, and tasklist -m will locate DLL files associated with active tasks. These commands are useful for advanced troubleshooting.

    Fashion & Beauty
    Digital Marketing

  19. Thanks. Don't you think it's worth posting these thoughts on Instagram? After all, this social network is now very popular. By the way, I advise you to buy instagram likes in order to quickly increase their number and promote your account to the top.

  20. ต้องการให้คุณนั้นเข้ามาสัมผัสเว็บไซต์แทงหวยที่มีคุณภาพลงทะเบียนเป็นสมาชิกกับทางพวกเรานี้เว็บไซต์แทงหวย ลอตเตอรี่ฮานอย ยอดนิยมเยอะที่สุด แล้วก็ติดอันดับ 1 ของเว็บไซต์ลอตเตอรี่ เมืองไทย ยืนยันจากผู้ใช้งาน รับประกันจ่ายจริง แทงหวยออนไลน์ อัตราจ่ายสูง ไม่หัก จ่ายเต็ม แม้ท่านกำลังมองหาเว็บไซต์แทงหวยที่เหมาะสมที่สุด เว็บไซต์ของพวกเราเป็นเว็บไซต์ที่เยี่ยมที่สุดแล้ว เปิดให้แทงหวยตลอด 1 วัน ให้อัตราการจ่ายที่สุดสูงที่สุด ให้ท่านสูงที่สุด เว็บไซต์ของพวกเรานั้นมากับคณะทำงานที่มีคุณภาพ แทงหวย ให้บริการอย่างเต็มใจ ลอตเตอรี่ฮานอย เอาใจใส่ทุกรายละเอียด เว็บไซต์ที่ยอดเยี่ยม เว็บไซต์ที่คุณนั้นไม่สมควรพลาดเด็ดขาดเลย

  21. จะต้องสารภาพเลยว่าในประเทศไทย ซื้อหวยออนไลน์ หรือทั่วทั้งโลกนั้นนิยมกันมากมายอยู่แล้วในการเสี่ยงดวงเสี่ยงเลขเด็ด หากจะนับกิจกรรมที่คนภายในบ้านพวกเรานิยมทำเสมือนๆกันเยอะที่สุด เชื่อเป็นอย่างมากเลยว่าการเล่นสลากกินแบ่งจะเป็นเยี่ยมกิจกรรมอันดับแรกๆแม้กระนั้นถ้าเกิดผ่านมาหลายงวดแล้วยังไม่ตรงเป้า ก็ต้องการเสนอแนะให้ลองเปิดประสบการณ์ใหม่กับ หวยยี่กีวันนี้ ดูบ้าง เพราะว่าเป็นการพนันที่ได้โอกาสลุ้นโชคได้มากกว่าสลากกินแบ่งแบบธรรมดา แล้วหลังจากนั้นก็มีหลายๆคนที่บรรลุเป้าหมายจากการแทงหวยในรูปแบบนี้ด้วย คาสิโนออนไลน์มันดีจำพวกที่ว่าใครหลายๆคนไม่กลับไปเล่นลอตเตอรี่แบบเดิมอีกเลย
    ผลยี่กี วันนี้

  22. This comment has been removed by the author.

  23. برخورداری از اقلیم مناسب، آب و هوای معتدل و نزدیکی به کوه های البرز در کنار ساخت و ساز های آپارتمان نشینی و همچنین ایجاد شهرک های صنعتی آن را تبدیل به موقعیت مناسبی برای زندگی کردن و همچنین کسب درآمد نموده است. از این رو در سال های اخیر شاهد رشد جمعیت و مهاجرت از شهرهای اطراف به خصوص تهران به این شهرستان پهناور می باشیم.
    فروش آپارتمان کرج

  24. มาแรง แซงทุกแวดวง อีกทั้งเน็ตไอดอล โดจิน ดาราหนัง นักแสดง ไม่ว่าจะทุกอาชีพหันมาพอใจ อ่านการ์ตูนฟิวใหม่

    เนื่องจากว่าเงินพวกนั้นมันมีมูลค่าสูงมากขึ้นเรื่อยเป็นต้นว่า สอนเทรดหุ้น คริปโทเคอร์เรนซี (cryptocurrency) ที่ในขณะนี้เป็นที่นิยมเป็นอย่างมาก

    ยา ไวอากร้า พูดได้ว่าเป็นอีกหนึ่งอาหารเสริม ไวอากร้า ที่ไม่ว่าไหนทุกหนทุกแห่งมีวางขายทั่วทั้งประเทศ รวมทั้งหาซื้อได้ตามร้านขายยา เซเว่น หรือสั่งในอินเทอร์เน็ตและก็ ไวอก้า


  25. This blog is really awesome. I learned lots of informations in your blog. Keep posting like this...
    IELTS Coaching in Bangalore
    Best IELTS Coaching in Bangalore

  26. tigerufa เว็บไซต์ตรง จ่ายจริง ไม่มีคดโกง ถูกเป็นล้าน จ่ายเป็นล้าน

    สมัคร tigerufa ถอนออก ถอนออกมาจากระบบ ด้วยระบบอัตโนมัติ ufabet88888 ที่สุดของบริการใหม่ ทำรายการได้ขอล…วยแจ้งข้าราชการ โอนฝากคอยไม่เกิน 30 วินาที

    แคชเข้าเกมส์ได้ได้เข้าเล่นโดยทันที เผาผลาญ… เร็วไว แล้วก็เร็วทันใจ โดยเฉพาะ กับ ท้า กล้าที่จะกล้า ยืนยันที่ตรง รับประกัน ซุปเปอร์ตรง tigerufa ท้ามากมาย ufabet สมัครตรงที่ตนเองจะตรงสามารถเปลี่ยนแปลงได้

  27. เล่นสล็อตออนไลน์ที่ดีที่สุดในโลก ทั้งหมดในที่เดียวโดยไม่ต้องดาวน์โหลดที่ BK8 – ค้นพบเกมสล็อตที่น่าตื่นเต้นและน่าดึงดูดที่สุด เสริมด้วยกลไกที่ยอดเยี่ยม ภาพที่สวยงาม และมีโอกาสชนะรางวัลแจ็คพอตสุดพิเศษ!สมัคร bk8thai

  28. One other word of caution: there is an abundance of automated website analysis services on the Internet. With few exceptions, we recommend that you avoid them. sport1 oslobodjenje ba

  29. So those with a clean genomic result might go for a cheap catastrophic plan, while those with a high risk of developing pricey illnesses will opt for more comprehensive Insurance.The result would be, in Insurance terms, an "adverse-selection death spiral," as the healthy opt out of expensive Insurance, the sick opt into it, and premiums spin out of control. What Is Swap In Insurance

  30. เราพร้อมให้บริการและคอยอัพเดทเกมใหม่ๆให้เล่นอยู่เสมอไม่ซ้ำ การสมัครเข้ามาได้ผ่านวิธีทางหน้าเว็บของเราโดยเราจะมีคณะทำงานรอคอยให้คำปรึกษาและก็ สล็อตเว็บตรง ช่วยเหลืออยู่ตลอด 24 ชั่วโมงไว้รอคอยให้บริการทุกคนอย่างเต็มเปี่ยม เข้ามาสนุกสนานแล้วหลังจากนั้นก็ทดลองเล่นได้อย่างสะดวกสบายไม่ว่าจะเป็นเกม สล็อตออนไลน์ เกมยิงปลาออนไลน์ เกมตากปลาออนไลน์

    ที่ทำให้คุณเล่นแล้วได้เงินจริง รองรับทุกเครื่องใช้ไม้สอยสำหรับในการเล่นแค่เพียงเข้ามาสมัครผ่านหน้าเว็บไซต์ สล็อต เว็บตรงไม่ผ่านเอเย่นต์ เกม สล็อต ของเราและจากนั้นก็ทำรายการโดยการกรอกข้อมูลแค่เพียง 3 นาที ก็ทำให้คุณได้เปิดประสบการณ์ใหม่ๆกับการเล่นเกม คาสิโนออนไลน์ ทุกแบบที่เราจัดการต้อนรับอย่างไม่มีขอบเขต

  31. รีวิวDisneyplus LUCA ( ลูก้า ) เป็นภาพยนตร์แนวอนิเมชั่น 3 มิติที่นำเสนอเรื่องราวในแบบแฟนตาซีและก้าวข้ามผ่านช่วงวัย ( Fantasy and Coming of Age ) เป็นผลงานการผลิตโดย Pixar Animation Studios และดูแลการจัดจำหน่ายโดย ดูหนัง ภาพยนตร์อนิเมชั่นเรื่องนี้เป็นผลงานการกำกับโดย เอนรีโก้ คาซาโรซา กับการกำกับงานด้านอนิเมชั่นเรื่องยาวคั้งแรกหลังจากฝากผลงานไว้กับ La Luna อนิเมชั่นเรื่องสั้นที่ฉายปะหน้าอนิเมชั่นยาวอย่าง BRAVE เมื่อปี 2011 จนสามารถชนะใจผู้ชม จนสามารถเข้าชิงรางวัลอนิเมชั่นยอดเยี่ยมจากงารประกาศผลรางวัลออสการ์ ครั้งที่ 84 เมื่อปี 2012 เขียนบทโดย เจสซี แอนดรูวส์ และ ไมค์ โจนส์ โดยทั้งสองคนนี่้มีเครดิตที่น่าสนใจอย่างมาก โดยคนแรกอย่าง เจสซี แอนดรูวส์ เคยมีผลงานการดัดแปลงบทภาพยนตร์จาก ดูหนังออนไลน์ นิยายวัยรุ่นแนวดราม่าที่้เขาเป็นคนเขียนเอง เรื่อง Me and Earl and the Dying Girl ที่ได้รับคะแนนวิจารณ์อย่างมากมาย

  32. Take a look and go.This is an impressive post. Come here and take a look at my information.
    electric masturbator cup
    electric masturbation cup


Post a Comment

Popular posts from this blog

CSRF enabled Ajax requests using Spring Security

Many of you who have worked on Spring Security might be aware of the fact that Spring Security protects applications from Cross Site Request Forgery using _csrf tokens in the request sent to the web server. You can find a detailed understanding in the Spring documentation page . The objective of this post is to explain how to send _csrf tokens in the Ajax requests when we protect our application URL and application access using spring security. How to get CSRF tokens While we submit a form using an application that is protected with Spring Security, the form gets a default hidden parameter in the form body when using <form:form> element. The param contains the _csrf tokens to authenticate the requests in the server. In case we use other ways to create forms, we have to manually include a hidden parameter that contains name as ${_csrf.parameterName} and  value as ${_csrf.token} . For example, <input type= "hidden" name= "${_csrf.parameterName}"

A wonderful technique to reduce website development cost

Websites - Good way to get online presence Websites are very vital to get online presence of any business nowadays. Websites are categorized into two different types. First one is Static Website and second one is Dynamic Website, normally known as web applications. Static websites are most widely used for any business since they help to bring up the online presence more easily and quickly. Depending on the content and features, static websites cost around $300-$700 . It includes web design and development. Apart from that, the business has to spend for hosting space and domain name for the website. Cloud based development is now more prevalent. Building a website and running it will be very easy and cheap using these cloud infrastructure. But the difficulty facing the development of static websites still looms high as it does not matter who provides the infrastructure. The development cost is still same. Technology - LAMP Static websites are developed using HTML and PHP mostly

Disable Datasource Auto Configuration in Spring Boot

Today morning, We had an interesting situation. Our spring boot application which is configured to run on MySQL needs to be run on a system which does not have MySQL database installed. But we had to develop few UI modules alone. So we decided to go ahead but how do we disable MySQL database auto-configuration? Here is what we did . Spring Boot is an interesting framework that helps auto configure everything for you. In case you need to override any of the auto-configuration, all you need to do is to simply customize it. The auto-configuration backs away. In this typical scenario, we dont want to customize the auto-configuration, rather we want to disable it temporarily until we complete our UI modules. As soon as the system is ready or we find alternate systems, we can run the Application with full-blown schema. OK. so how did we disable the database auto configuration? We are using Spring Boot with JPA, Hibernate and FlywayDB migration tool. If this is going to be your boot